阅读这份关于 Chrome 开发者工具网络分析功能的综合参考文档,探索分析页面加载方式的新方法。
录制网络请求
默认情况下,只要开发者工具处于打开状态,开发者工具就会记录在 Network 面板中的所有网络请求。
停止录制网络请求
如需停止录制请求,请执行以下操作:
- 点击 Network 面板上的 Stop recording network log 图标 。此图标会变为灰色,表示开发者工具不再记录请求。
- 按 Command> + E (Mac) 或 Ctrl + E(Windows、Linux),且 Network 面板处于聚焦状态。
清除请求
在网络面板上点击清除 ,以清除请求表中的所有请求。
在网页加载过程中保存请求
若要在网页加载过程中保存请求,请选中网络面板上的保留日志复选框。 在您停用保留日志之前,开发者工具会保存所有请求。
在网页加载期间截取屏幕截图
截取屏幕截图以分析用户在等待页面加载时看到的内容。
如需启用屏幕截图,请打开网络面板中的设置 ,然后勾选截取屏幕截图。
当 Network 面板处于活动状态时,重新加载页面以捕获屏幕截图。
捕获后,您可以通过以下方式与屏幕截图互动:
- 将鼠标悬停在屏幕截图上,即可查看该屏幕截图的截取点。“Overview”窗格中会显示一条黄线。
- 点击屏幕截图的缩略图以滤除截取屏幕截图后发生的所有请求。
- 双击缩略图可放大。
重放 XHR 请求
要重放 XHR 请求,请在 Requests 表中执行以下操作之一:
- 选择请求,然后按 R。
- 右键点击相应请求,然后选择 Replay XHR。
更改加载行为
通过停用浏览器缓存来模拟首次访问者
如需模拟首次用户体验您网站的方式,请勾选停用缓存复选框。 开发者工具会停用浏览器缓存。这样可以更准确地模拟首次用户体验,因为在重复访问时,请求是通过浏览器缓存传送。
在 Network Conditions 抽屉式导航栏中停用浏览器缓存
如果要在使用其他开发者工具面板时停用缓存,请使用网络状况抽屉。
- 点击 图标,打开 Network Conditions 抽屉式导航栏。
- 选中或取消选中停用缓存复选框。
手动清除浏览器缓存
如需随时手动清除浏览器缓存,请右键点击请求表格中的任意位置,然后选择清除浏览器缓存。
离线模拟
有一类新的 Web 应用,称为渐进式 Web 应用,此类应用可在 Service Worker 的帮助下离线运行。构建此类应用时,能够快速模拟没有数据连接的设备非常有用。
要模拟完全离线的网络体验,请从停用缓存复选框旁边的网络节流下拉菜单中选择离线。
开发者工具会在网络标签页旁边显示一个警告图标,提醒您离线功能已启用。
模拟慢速网络连接
如需模拟慢速 3G、快速 3G 和其他连接速度,请从限制菜单中选择相应选项。
开发者工具会在网络标签页旁边显示一个警告图标,提醒您已启用节流功能。
创建自定义节流配置文件
除了预设(例如慢速或快速 3G)之外,您还可以添加自己的自定义节流配置文件:
- 打开 Throttling 菜单,然后依次选择 Custom > Add...。
- 按照设置 设置 > 限制中的说明设置新的限制配置文件。
返回网络面板,从限制下拉菜单中选择新的配置文件。
开发者工具会在 Network 面板旁边显示 警告图标,提醒您已启用节流功能。
限制 WebSocket 连接数
自 99 版起,除了 HTTP 请求之外,开发者工具还会限制 WebSocket 连接。
如需观察 WebSocket 节流情况,请执行以下操作:
- 启动新连接,例如使用测试工具。
- 在网络面板上,选择无节流,然后通过连接发送消息。
- 创建一个运行速度非常慢的自定义节流配置文件,例如
10 kbit/s
。这种运行缓慢的配置文件有助于您发现不同之处。 - 在网络面板上,选择相应配置文件,然后发送另一条消息。
- 切换 WS 过滤器,点击您的连接名称,打开 Messages(消息)标签页,然后检查启用和不启用节流功能的已发送消息和回显消息的时间差异。例如:
在“Network Conditions”抽屉式导航栏中模拟慢速网络连接
如果您在使用其他开发者工具面板时想要限制网络连接速度,请使用 Network conditions 抽屉式导航栏。
- 点击 图标,打开 Network Conditions 抽屉式导航栏。
- 从网络节流菜单中选择连接速度。
手动清除浏览器 Cookie
如需随时手动清除浏览器 Cookie,请右键点击请求表格中的任意位置,然后选择清除浏览器 Cookie。
替换 HTTP 响应标头
替换用户代理
若要手动替换用户代理,请执行以下操作:
- 点击 图标,打开 Network Conditions 抽屉式导航栏。
- 清除自动选择。
- 从菜单中选择用户代理选项,或在框中输入自定义选项。
过滤请求
按资源过滤请求
使用过滤框可按资源(例如请求的网域或大小)过滤请求。
如果您没有看到该框,则“Filters”窗格可能处于隐藏状态。请参阅隐藏“过滤条件”窗格。
要反转过滤器,请选中过滤器框旁边的反转复选框。
您可以同时使用多个属性,只需用空格分隔各个属性即可。例如,mime-type:image/gif larger-than:1K
会显示大于 1 KB 的所有 GIF。
这些多属性过滤器等同于 AND 操作。不支持 OR 运算。
接下来是受支持属性的完整列表。
cookie-domain
。显示用于设置特定 Cookie 网域的资源。cookie-name
。显示用于设置特定 Cookie 名称的资源。cookie-path
。显示用于设置特定 Cookie 路径的资源。cookie-value
。显示设置了特定 Cookie 值的资源。domain
。仅显示来自指定网域中的资源。您可以使用通配符 (*
) 来包含多个网域。例如,*.com
会显示以.com
结尾的所有域名中的资源。开发者工具会显示 ,使用其遇到的所有网域填充自动填充下拉菜单。has-overrides
。显示已替换content
、headers
、任何替换项 (yes
) 或没有任何替换项 (no
) 的请求。您可以在请求表格中添加相应的包含替换项列。has-response-header
。显示包含指定 HTTP 响应标头的资源。开发者工具会用它遇到的所有响应标头填充自动补全下拉菜单。is
。使用is:running
查找WebSocket
项资源。larger-than
。显示大于指定大小的资源(以字节为单位)。将值设置为1000
等同于将值设置为1k
。method
。显示通过指定 HTTP 方法类型检索的资源。开发者工具会用它遇到的所有 HTTP 方法填充自动补全下拉菜单。mime-type
。显示指定 MIME 类型的资源。开发者工具会使用其遇到的所有 MIME 类型填充自动补全下拉菜单。mixed-content
。显示所有混合内容资源 (mixed-content:all
),或仅显示显示的资源 (mixed-content:displayed
)。priority
。显示优先级与指定值匹配的资源。resource-type
。显示某种资源类型的资源,例如图片。开发者工具会使用其遇到的所有资源类型填充自动补全下拉菜单。response-header-set-cookie
. 在“Issues”(问题)标签页中显示原始 Set-Cookie 标头。如果 Cookie 格式有误,且Set-Cookie
标头不正确,“Network”面板中会标记此类 Cookie。scheme
- 显示通过不受保护的 HTTP (scheme:http
) 或受保护的 HTTPS (scheme:https
) 检索的资源。set-cookie-domain
。显示具有Set-Cookie
标头且Domain
属性与指定值匹配的资源。开发者工具会用其遇到的所有 Cookie 网域填充自动补全功能。set-cookie-name
。显示具有Set-Cookie
标头且名称与指定值匹配的资源。开发者工具会使用遇到的所有 Cookie 名称填充自动补全功能。set-cookie-value
。显示具有Set-Cookie
标头且值与指定值匹配的资源。开发者工具会使用它遇到的所有 Cookie 值填充自动补全功能。status-code
。仅显示 HTTP 状态代码与指定代码匹配的资源。开发者工具会在自动填充下拉菜单中填充其遇到的所有状态代码。url
。显示url
与指定值匹配的资源。
按类型过滤请求
如需按请求类型过滤请求,请点击 Network 面板上的 All、Fetch/XHR、JS、CSS、Img、Media、Font、Doc、WS (WebSocket)、Wasm (WebAssembly)、Manifest 或 Other(此处未列出的任何其他类型)按钮。
如果您看不到这些按钮,则表明“Filters”窗格可能处于隐藏状态。请参阅隐藏滤镜窗格。
若要同时启用多个类型的过滤条件,请按住 Command (Mac) 或 Ctrl(Windows、Linux),然后点击。
按时间过滤请求
在概览窗格上向左或向右拖动,以仅显示在该时间范围内处于活跃状态的请求。过滤条件是包含边界值。系统会显示在突出显示的时间段内处于活动状态的所有请求。
隐藏数据网址
数据网址是嵌入到其他文档中的小文件。您在 Requests 表格中看到的任何以 data:
开头的请求都是数据网址。
若要隐藏这些请求,请选中 隐藏数据网址。
底部的状态栏会显示所示请求总数与请求总数中的总数。
隐藏扩展程序网址
若要专注于您编写的代码,您可以滤除由 Chrome 中已安装的扩展程序发送的不相关请求。扩展程序请求中包含以 chrome-extension://
开头的网址。
若要隐藏扩展程序请求,请勾选 隐藏扩展程序网址。
底部的状态栏会显示所示请求总数与请求总数中的总数。
仅显示带有被屏蔽的响应 Cookie 的请求
要滤除除响应 Cookie 因任何原因而被拦截的请求之外的所有消息,请选中 拦截的响应 Cookie。您可在此演示页面上试用。
底部的状态栏会显示所示请求总数与请求总数中的总数。
如要找出响应 Cookie 被屏蔽的原因,请选择相应请求,打开其 Cookie 标签页,然后将鼠标悬停在 信息图标上。
此外,“网络”面板会在受第三方 Cookie 逐步淘汰影响或被豁免的请求旁边显示警告警告图标。将鼠标悬停在该图标上即可查看包含提示的提示,然后点击该图标即可转到 Issues 面板了解详情。
仅显示已屏蔽的请求
如需过滤掉除已屏蔽的请求之外的所有消息,请查看 已屏蔽的请求。如需对此进行测试,您可以使用网络请求屏蔽抽屉式导航栏标签页。
请求表格以红色突出显示已屏蔽的请求。底部的状态栏会显示所示请求总数与请求总数中的总数。
仅显示第三方请求
如需滤除除来源与网页来源不同的请求之外的所有请求,请查看 第三方请求。您可在此演示页面上试用。
底部的状态栏会显示所示请求总数与请求总数中的总数。
对请求进行排序
默认情况下,Requests 表中的请求按启动时间排序,但您可以使用其他条件对该表进行排序。
按列排序
点击请求表格中任意列的标题,即可按该列对请求进行排序。
按活动阶段排序
如需更改 Waterfall 对请求的排序方式,请右键点击 Requests 表格的标题,将鼠标悬停在 Waterfall 上,然后选择以下选项之一:
- 开始时间:启动的第一个请求位于顶部。
- 响应时间。开始下载的第一个请求位于顶部。
- 结束时间:完成的第一个请求位于顶部。
- 总时长:连接设置和请求 / 响应时间最短的请求位于顶部。
- 延迟时间。等待最短响应时间的请求位于顶部。
这些说明假定每个选项都是按从最短到最长排列的。点击广告瀑布流列标题会反转顺序。
在此示例中,广告瀑布流按总时长排序。每个条形中较浅的部分表示等待的时间。深色部分表示下载字节所花费的时间。
分析请求
只要开发者工具处于打开状态,它就会在 Network 面板中记录所有请求。使用网络面板分析请求。
查看请求日志
在 Requests 表格中查看在开发者工具打开期间发出的所有请求的日志。点击请求或将鼠标悬停在请求上可显示有关请求的更多信息。
默认情况下,Requests 表格会显示以下列:
- 名称:资源的文件名或标识符。
状态。此列可显示以下值:
- HTTP 状态代码,例如
200
或404
。 CORS error
请求因跨域资源共享 (CORS) 而失败。(blocked:origin)
,适用于标头配置错误的请求。将鼠标悬停在此状态值上可查看提示,其中包含有关错误问题的提示。(failed)
,后跟错误消息。
- HTTP 状态代码,例如
类型。所请求资源的 MIME 类型。
Initiator。以下对象或进程可以发起请求:
- Parser。Chrome 的 HTML 解析器。
- 重定向。HTTP 重定向。
- 脚本。JavaScript 函数。
- 其他。某些其他进程或操作,例如使用链接导航到某页面或在地址栏中输入网址。
大小。服务器传送的响应标头和响应正文的总大小。
时间。从请求开始到在响应中接收到最终字节的总时长。
广告瀑布流。每个请求活动的直观明细。
添加或移除列
右键点击请求表格的标题,然后选择隐藏或显示选项。显示的选项旁边带有对勾标记。
您可以添加或移除以下额外列:Path、网址、Method、Protocol、Scheme、Domain、Remote address、Remote 地址空间、Initiator 地址空间、Cookies、Set cookies、Priority、Connection ID、Has override 和 Waterfall。
添加自定义列
若要向 Requests 表格添加自定义列,请执行以下操作:
- 右键点击 Requests 表格的标题,然后依次选择 Response Headers > Manage Header Column。
- 在对话框窗口中,点击 Add custom header(添加自定义标头),输入其名称,然后点击 Add(添加)。
按内嵌框架对请求进行分组
如果网页上的内嵌框架发起了大量请求,您可以通过分组来简化请求日志。
若要按 iframe 对请求进行分组,请打开网络面板中的设置 ,然后勾选 按框架分组。
如需查看由内嵌框架发起的请求,请在请求日志中将其展开。
查看彼此相关的请求时间
使用 Waterfall(广告瀑布流)查看彼此相关的请求时间。默认情况下,广告瀑布流按请求的开始时间进行排列。因此,左侧请求的开始时间比右侧请求早。
如需了解对广告瀑布流进行排序的不同方式,请参阅按活动阶段排序。
分析 WebSocket 连接的消息
如需查看 WebSocket 连接的消息,请执行以下操作:
- 在请求表格的名称列下,点击 WebSocket 连接的网址。
- 点击消息标签页。此表格会显示最后 100 封邮件。
如需刷新表格,请在 Requests 表格的 Name 列下重新点击 WebSocket 连接的名称。
该表格包含三列:
- Data 类中定义的列名称。消息载荷。如果消息是纯文本,会显示在此处。对于二进制运算码,此列显示运算码的名称和代码。支持以下运算码:接续框架、二进制框架、连接关闭框架、Ping 框架和 Pong 框架。
- 长度。消息载荷的长度(以字节为单位)。
- 时间。接收或发送消息的时间。
消息根据其类型进行颜色编码:
- 传出文本消息为浅绿色。
- 收到的短信显示为白色。
- WebSocket 操作码为浅黄色。
- 错误为浅红色。
分析数据流中的事件
如需查看服务器通过 Fetch API、EventSource API 和 XHR 流式传输的事件,请执行以下操作:
如需过滤事件,请在 EventStream 标签页顶部的过滤栏中指定正则表达式。
要清除捕获的事件列表,请点击 block 清除。
查看响应正文的预览
如需查看响应正文的预览,请执行以下操作:
- 在请求表格的名称列下,点击请求的网址。
- 点击预览标签页。
此标签主要用于查看图片。
查看响应正文
如需查看请求的响应正文,请执行以下操作:
- 在“Requests”表格的 Name 列下,点击请求的网址。
- 点击响应标签页。
查看 HTTP 标头
如需查看请求的 HTTP 标头数据,请执行以下操作:
- 点击请求表格中的请求。
- 打开 Headers 标签页,然后向下滚动到 General、Response Headers、Request Headers 和 Early Hints Headers 部分(可选)。
在 General 部分中,开发者工具会在收到的 HTTP 状态代码旁边显示人类可读的状态消息。
在 Response Headers 部分,您可以将鼠标悬停在标头值上,然后点击 Edit Edit 按钮,在本地替换响应标头。
查看 HTTP 标头来源
默认情况下,Headers 标签页按字母顺序显示标头名称。如需按收到顺序查看 HTTP 标头名称,请执行以下操作:
- 打开您感兴趣的请求的 Headers 标签页。请参阅查看 HTTP 标头。
- 点击请求标头或响应标头部分旁边的查看来源。
预配标头警告
有时,Headers 标签页会显示 Provisional headers are shown...
警告消息。原因可能如下:
该请求不是通过网络发送的,而是从本地缓存提供的,本地缓存不会存储原始请求标头。在这种情况下,您可以停用缓存以查看完整的请求标头。
网络资源无效。例如,在控制台中执行
fetch("https://jec.fish.com/unknown-url/")
。
出于安全考虑,开发者工具也可以仅显示临时标头。
查看请求载荷
如需查看请求的载荷(即其查询字符串参数和表单数据),请从请求表格中选择一个请求,然后打开载荷标签页。
查看载荷来源
默认情况下,开发者工具以人类可读的形式显示载荷。
如需查看查询字符串参数和表单数据的来源,请在载荷标签页上,点击查询字符串参数或表单数据部分旁边的查看来源。
查看查询字符串参数的网址解码参数
如需切换参数的网址编码功能,请在载荷标签页上,点击查看已解码或查看网址编码后的数据。
查看 Cookie
如需查看在请求的 HTTP 标头中发送的 Cookie,请执行以下操作:
- 在“Requests”表格的 Name 列下,点击请求的网址。
- 点击 Cookies 标签。
有关各列的说明,请参阅字段。
如需修改 Cookie,请参阅查看、修改和删除 Cookie。
查看请求的时间细分数据
如需查看请求的时间细分数据,请执行以下操作:
- 在请求表格的名称列下,点击请求的网址。
- 点击时间标签页。
要更快地访问此数据,请参阅预览时间细分数据。
如需详细了解您可能会在“时间”标签页中看到的各个阶段,请参阅时间细分阶段说明。
预览时间细分数据
如需查看请求的时间细分数据的预览,请将鼠标悬停在“Requests”表格的 Waterfall(广告瀑布流)列中的相应请求条目上。
如需了解如何在不需要悬停鼠标时访问这些数据,请参阅查看请求的时间细分数据。
时间细分阶段说明
以下是有关您可能会在 Timing 标签中看到的每个阶段的详细信息:
- 排队。在连接开始前以及以下情况下,浏览器会将请求加入队列:
- 存在优先级更高的请求。
- 此源已打开 6 个 TCP 连接(达到上限)。仅适用于 HTTP/1.0 和 HTTP/1.1。
- 浏览器正在短暂地分配磁盘缓存中的空间。
- Stalled(已停用)。请求可能会因队列中描述的任何原因而在连接启动后停止。
- DNS 查询。浏览器正在解析请求的 IP 地址。
- 初始连接。浏览器正在建立连接,包括 TCP 握手、重试和协商 SSL。
- 代理协商。浏览器正在与代理服务器协商请求。
- 请求已发送。正在发送请求。
- ServiceWorker 准备。浏览器正在启动 Service Worker。
- 向 ServiceWorker 发出的请求。正在将请求发送到 Service Worker。
- 正在等待 (TTFB)。浏览器正在等待响应的第一个字节。TTFB 表示首字节时间。此时间包括 1 次往返延迟时间以及服务器准备响应所用的时间。
- 内容下载。浏览器直接从网络或 Service Worker 接收响应。此值是读取响应正文所用的总时长。大于预期值可能表示网络速度较慢,或者浏览器正忙于执行其他工作,导致响应延迟读取。
查看发起方和依赖项
如需查看请求的发起者和依赖项,请按住 Shift 键,并将鼠标指针悬停在“请求”表格中的请求上。DevTools 将发起者的颜色设置为绿色,将依赖项设置为红色。
当 Requests 表格按时间顺序排序时,您将鼠标悬停在请求上方的第一个绿色请求是依赖项的发起者。如果上方还有另一个绿色请求,则更高的请求是发起者的发起者。此类的例子比比皆是。
查看加载事件
开发者工具会在 Network 面板上的多个位置显示 DOMContentLoaded
和 load
事件的时间。DOMContentLoaded
事件的颜色为蓝色,load
事件为红色。
查看请求总数
请求总数列在 Network 面板底部的 Summary 窗格中。
查看已传输和已加载资源的总大小
开发者工具会在 Network 面板底部的 Summary 窗格中列出已传输和已加载(未压缩)资源的总大小。
要了解浏览器解压缩后的资源的大小,请参阅查看资源的未压缩大小。
查看导致请求的堆栈轨迹
当 JavaScript 语句导致请求资源时,将鼠标悬停在 Initiator 列上,以查看导致该请求的堆栈轨迹。
查看资源的未压缩大小
检查设置 > Big request rows(大请求行),然后查看 Size 列的底部值。
在此示例中,通过网络发送的 www.google.com
文档的压缩大小为 43.8 KB
,而未压缩大小为 136 KB
。
导出请求数据
将所有网络请求保存到 HAR 文件中
HAR(HTTP 归档)是一种文件格式,供多种 HTTP 会话工具导出捕获的数据。格式是包含一组特定字段的 JSON 对象。
您可以通过以下两种方式将所有网络请求保存到 HAR 文件中:
- 右键点击 Requests 表格中的任意请求,然后选择 Save all as HAR with content。
- 在 Network 面板顶部的操作栏中点击 Export HAR。
有了 HAR 文件后,您可以通过以下两种方式将其重新导入开发者工具中以进行分析:
- 将 HAR 文件拖放到 Requests(请求)表格中。
- 在 Network 面板顶部的操作栏中点击 Import HAR。
将一个或多个请求复制到剪贴板
在请求表的名称列下,右键点击请求,将鼠标悬停在复制上,然后选择以下选项之一:
- 复制网址。将请求的网址复制到剪贴板。
- 复制为 c网址。以 c网址 命令的形式复制请求。
- 以 PowerShell 格式复制。以 PowerShell 命令的形式复制请求。
- 以抓取方式复制。以提取调用的形式复制请求。
以 Node.js 提取格式复制。以 Node.js 提取调用的形式复制请求。
复制回复。将响应正文复制到剪贴板。
复制所有网址:将所有请求的网址复制到剪贴板。
全部复制为 c网址。以 c网址 命令链的形式复制所有请求。
以 PowerShell 格式复制全部内容。以一系列 PowerShell 命令的形式复制所有请求。
以抓取方式复制全部内容。以提取调用链的形式复制所有请求。
以 Node.js 提取格式复制全部内容。以 Node.js 提取调用链的形式复制所有请求。
全部复制为 HAR。以 HAR 数据格式复制所有请求。
更改“网络”面板的布局
展开或收起网络面板界面的各个部分,以便重点关注您关注的内容。
隐藏“Filters”窗格
默认情况下,开发者工具会显示“Filters”窗格。点击过滤 以将其隐藏。
使用大请求行
如果您希望网络请求表中有更多空白,请使用大行。在使用大行时,某些列还会提供更多信息。例如,Size 列的底部值是未压缩的请求大小,Priority 列同时显示初始(最低值)和最终(最高值)提取优先级。
打开设置 ,然后点击大请求行以查看大行。
隐藏“概览”轨道
默认情况下,开发者工具会显示 Overview 轨道。打开设置 ,然后取消选中显示概览复选框以将其隐藏。