0%

Chrome 调试面板之--Network

一、Network 面板介绍

其中:

  • Controls 控制 Network 的外观和功能。
  • Filters 控制 Requests Table 具体显示哪些内容。
  • Overview 显示获取到资源的时间轴信息。
  • Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
  • Summary 显示总的请求数、数据传输量、加载时间信息。

二、Controls

  • Record Network Log / Stop recording network log

开始/停止记录网络请求

  • Clear

清空当前记录内容

  • Filter

展开/收起 Filters 菜单

  • Search

展开/收起 Search 菜单

  • Preserve log

刷新界面时,保留/不保留上次网络请求记录

  • Disable cache

禁用/不禁用网络缓存功能。当禁用时,每次界面刷新都跟首次打开界面的效果一样,可以方便优化首次进入界面的性能

  • Trottling

模拟不同的网络条件

  • Import HAR file

导入 HAR 格式的网络调试记录

  • Export HAR file

将当前已记录的网络请求记录导出成 HAR 文件

三、Filters

  • 筛选输入框

输入筛选词来筛选特定的请求,支持按以下内容筛选:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
1、domain 
可以模糊、正则匹配

2、has-response-header
response 中包含特定 header

3、is
可以使用 `is:running` 找到 `WebSocket` 资源

4、larger-than
筛选出大于特定尺寸的请求,单位是字节

5、method
通过 HTTP 方法筛选

6、mime-type
通过文件的 MIME 类型筛选。MIME 媒体类型(通常称为 Multipurpose Internet Mail Extensions 或 MIME 类型 )是一种标准,用来表示文档、文件或字节流的性质和格式。

7、mixed-content
可以通过 mixed-content:all 筛选出全部的请求,也可以通过 mixed-content:displayed 筛选出当前展示的请求

8、scheme
通过 scheme:http 筛选出 http 请求,通过 scheme:https 筛选出 https 请求

9、set-cookie-domain
筛选通过 Set-Cookie 设置了 Domain 的请求

10、set-cookie-name
筛选通过 Set-Cookie 设置了 name 的请求

11、set-cookie-value
筛选通过 Set-Cookie 设置了 value 的请求

12、status-code
筛选特定 HTTP code 的请求
  • Hide Data URLs

隐藏/不隐藏 Data URLs 类型的文件

  • Filter requests by type

通过类型筛选请求,包含 XHR、JS、CSS、Img、Media、Font、Doc、WS(WebSocket)、Mainfest 以及其他 Other

  • Has blocked cookies

有/没有 blocked cookies

  • Blocked Requests

有/没有 blocked 请求

四、Overview

以时间轴方式展示所有的请求

五、Requests Table

在 Requests Table 的 Header 上可以右键显示更多的列,默认显示以下列:

  • Name

请求或资源的文件名或唯一标识

  • Status

HTTP 状态码

  • Type

资源的 MIME 类型

  • Initiator

请求发起者,共分以下几种:

Parser:Chrome 的 HTML parser
Redirect:HTTP 重定向
Script:JavaScript 脚本
Other:其它

  • Size

请求 response 的 Header 和 body 大小之和

  • Time

请求的全部耗时,包括请求发出到收到数据的总时间

  • Waterfall

每个请求的可视化分解

六、Summary

  • total number of requests

  • total download size over network

  • total resources loaded by the page

  • DOMContentLoaded

  • Load

七、timing breakdown

请求耗时分解,共有以下阶段:

Resource Scheduling

  • Queueing

排队中;有以下情况会导致请求排队:

1、有更高优先级的请求
2、每个域名已经建立了超过 6 个 TCP 连接(HTTP/1.0 或 HTTP/1.1 才有这个限制)
3、浏览器正在分配磁盘空间

Connection Start

  • Stalled

停止;一个请求可能会因为导致 Queueing 的原因而导致 Stalled

解决 Queueing/Stalled 问题的方法:

1、如果必须使用 HTTP/1.0 或 HTTP/1.1 ,进行域名分片(domain sharding)来解决 6 个 TCP 连接的限制
2、使用 HTTP/2 以规避 6 个 TCP 连接的限制
3、删除或推迟发送不必要的请求

  • DNS Lookup

DNS 寻找 IP 地址

  • Initial connection

浏览器建立请求链接耗时,包括 TCP 握手/重试和 SSL 协商

  • Proxy negotiation

与代理服务器协商请求

Request/Response

  • Request sent

请求发送

  • ServiceWorker Preparation

浏览器启动 ServiceWorker

  • Request to ServiceWorker

请求正在发送给 ServiceWorker

  • Waiting (TTFB)

浏览器正在等待 response 的第一个字节,TTFB 是 Time To First Byte 的缩写。这个耗时包括请求 1 个往返的延迟,以及服务器准备响应所用的时间。

可能导致 TTFB 的原因:

1、客户端和服务器的网络连接慢
2、服务器响应速度慢

对应的解决方案:

1、通过 CDN 优化客户端服务端网络连接慢问题
2、服务器优化响应速度

  • Content Download

浏览器接收 response

  • Receiving Push

浏览器正在接收 HTTP/2 的服务器 Push

  • Reading Push

浏览器正在读取之前收到的 Push 数据

八、其它

  • Use large request rows

选项开启后,会以双行的形式展示 size 列,其中上面深颜色的表示通过网络传输的大小,下面浅颜色的表示未经压缩的尺寸

  • Capture screenshots

选项开启后,会新增一个显示截图的面板。重新刷新网页就能看到界面截图:

九、参考文档