Network(网络)

2019-02-28 10:00:26
linefo
449
最后编辑:linefo 于 2019-08-29 16:49:56




用的最多的地方之一,所以写详细一点。

简单来说就是看各种网页请求的。


默认的整体界面看一下:



1、工具栏选项卡



从左到右

(1)Stop recording network log

停止记录资源请求记录

(2)Clear

清除所有的资源请求记录

(3)Filter

过滤器选项卡开关,后面有详细说明。

(4)Search

搜索开关,这个除了可以搜索Nanme,还可以搜索到Header的内容和Response的内容。

(5)Preserve Log

持久化记录。一般来讲刷新或跳转页面以后会重新加载资源请求记录,但勾选这个选项以后会保持之前的资源请求记录。

(6)Disable cache

关闭缓存。浏览器默认会优先从缓存拿内容,勾选这个以后就会禁止缓存

(7)Online

这里可以模拟不同的网络环境,比如我们可以测试比较慢的网速下网页的打开速度如何。

(8)Import HAR file

(9)Export HAR


点开最右边的小齿轮,还可以选择是否显示额外的菜单


(1)Use large request rows

选择是否用更复杂的方式显示资源请求记录列表

(2)Group by frame

(3)Show overview

显示时间轴。我们可以在其中操作查看不同时间段的资源请求记录

(4)Capture screenshots


2、过滤器选项卡



从左到右

(1)搜索框

输入内容并回车后,按照输入的内容,根据Name来进行过滤

(2)Hide data URLs

(3)All

显示所有访问记录

(4)XHR

XHR的网络请求资源(我想知道fetch方式放哪里?)

(5)JS、CSS、Img、Media、Font、Doc

这几个和字面意思一样,分别是js资源文件、css资源文件、图片资源、多媒体资源、字体资源、文档资源(一般是HTML文件)

(6)WS

这个是websocket的。当网页进行了websocket连接时,必须先打开开发者工具再访问网页才能在这里看到数据。

(7)Manifest

(8)Other

其他资源


3、资源请求列表项


具体每个项代表的意思不展开讲了。


(1)排序

在每个项那里点击左键,可以按照该项进行排序

(2)选择显示哪些项

随便在任意列表项点击右键,可以选择显示哪些列表项


4、请求详情


点击任意一个资源访问请求,可以在右侧看到请求详情


(1)Headers

Header列表。

General表示 Request(请求)和Response(响应)共有的Header项。

Response Headers表示响应的Header项。

RequestHeaders表示请求的Header项。

Query String Parameters表示GET方式的参数。


(2)Preview

优化过格式的响应内容


(3)Response

响应内容


(4)Timing

时间信息。

这里我们可以分析整个资源请求周期的时间耗费。


5、状态栏


从左到右是:请求资源数、传输总大小(已缓存的不会计算进来)、总共加载时间、DOM文档加载时间、???时间。