google network面板用法详解

谷歌浏览器network用法详解:

network工具功能强大,能够让我看到网页加载的信息,比如加载时间,和先后顺序,是否是并行加载,还是堵塞加载。

下面进入正题:

上面就是network面板的截图。
默认情况下有八列:

(1).Name:表示加载的文件名。
(2).Method:表示请求的方式。
(3).Status:表示状态码(200为请求成功,304表示从缓存读取)。
(4).Type:表示文件的MIME Type的类型。
(5).Initiator:表示发出这个文件请求的发出者。
(6).Size:表示文件大小。
(7).Time:表示每个请求的总时长。
(8).Timeline:以图表的形式显示元素的请求和加载情况。

当然内容不仅仅先于以上8个,右击上面八个任意一个选项卡可以弹出一个菜单,可以查看更多内容:
Google network

不同颜色的横向柱条表示不同的含义:

(1).Stalled:浏览器得到要发出这个请求的指令,到请求可以发出的等待时间,一般是代理协商、以及等待可复用的TCP连接释放的时间,不包括DNS查询、建立TCP连接等时间等。
(2).Request sent:请求第一个字节发出前到最后一个字节发出后的时间,也就是上传时间。
(3).Waiting 请求发出后,到收到响应的第一个字节所花费的时间(Time To First Byte)。
(4).Content Download 收到响应的第一个字节,到接受完最后一个字节的时间,就是下载时间。

其他条目的含义,大家可以自行在网上查询。
选项卡筛选:

点击顶部选项卡可以实现加载的资源筛选效果。
查看文件详细信息:

点击具体的文件可以查看更为详细的信息。
区间选中:
点击顶部类似于时间轴的区域,可以实现定位加载时间区间效果。

再双击就可以恢复到原来状态。
network

猜你喜欢

转载自blog.csdn.net/qq_41333582/article/details/82320117
今日推荐