网络功能参考

Kayce Basques

Sofia Emelianova

在 Chrome 开发者工具的这份综合参考资料中探索分析页面加载方式的新方法 网络分析功能。

录制网络请求

默认情况下，只要开发者工具处于打开状态，DevTools 就会在 Network 面板中记录所有网络请求。

停止记录网络请求

如需停止录制请求，请执行以下操作：

• 点击停止记录网络日志。 位于网络面板上。此图标变为灰色，表示开发者工具不再记录请求。
• 按 Command>+ E (Mac) 或 Ctrl + E（Windows、Linux）同时选中网络面板。

清除请求

点击清除 以清除 Requests 表格中的所有请求。

在网页加载过程中保存请求

要在网页加载后保存请求，请选中网络面板上的保留日志复选框。 在您停用 Preserve log（保留日志）之前，开发者工具会保存所有请求。

在网页加载期间截取屏幕截图

截取屏幕截图以分析用户在等待页面加载时看到的内容。

如需启用屏幕截图，请打开 Network 面板中的 Settings ，然后选中 Capture screenshot。

在 Network 面板获得焦点时重新加载页面以截取屏幕截图。

截取后，您可以通过以下方式与屏幕截图互动：

• 将鼠标悬停在屏幕截图上即可查看截取屏幕截图的时间点。黄线 显示在 Overview 窗格中。
• 点击屏幕截图的缩略图，以过滤掉在屏幕截图 已捕获。
• 双击缩略图可放大。

重放 XHR 请求

如需重放 XHR 请求，请在 Requests 表中执行以下任一操作：

• 选择相应请求，然后按 R。
• 右键点击该请求，然后选择 Replay XHR。

更改加载行为

通过停用浏览器缓存来模拟首次访问者

若要模拟新用户在网站上的体验，请选中停用缓存复选框。 开发者工具会停用浏览器缓存。这样可以更准确地模拟新用户的体验， 因为在重复访问时，请求会从浏览器缓存中提供。

从“网络状况”抽屉式导航栏中停用浏览器缓存

如果您在使用其他开发者工具面板时想要停用缓存，请使用网络条件 抽屉式导航栏。

1. 点击 图标，打开 Network Conditions 抽屉式导航栏。
2. 选中或清除停用缓存复选框。

手动清除浏览器缓存

要随时手动清除浏览器缓存，请右键点击 Requests（请求）表格中的任意位置，然后 选择清除浏览器缓存。

离线模拟

有一类新的 Web 应用称为渐进式 Web 应用，这种应用可以通过 Service Worker 可提供的帮助。在构建此类应用时，能够 可以快速模拟没有数据连接的设备。

若要模拟完全离线的网络体验，请从停用缓存复选框旁边的网络节流下拉菜单中选择离线。

DevTools 会在 Network 标签页旁边显示一个警告图标，提醒您离线功能已启用。

模拟慢速网络连接

如需模拟快速 4G、慢速 4G 或 3G 网络，请从顶部操作栏中的节流下拉菜单中选择相应的预设。

开发者工具会在 Network 面板旁边显示一个警告警告图标，提醒您已启用限制。

创建自定义限制配置文件

除了慢速或快速 4G 等预设之外，您还可以添加自己的 自定义节流配置文件：

1. 打开 Throttling 菜单，然后选择 Custom >添加...。
2. 按照设置 设置 >限制。

3. 返回网络面板，从限制下拉菜单中选择您的新配置文件。

   

开发者工具会在 Network 面板旁边显示一个 警告图标，提醒您节流功能已启用。

限制 WebSocket 连接

除了 HTTP 请求之外，从 99 版开始，开发者工具还会限制 WebSocket 连接数。

如需观察 WebSocket 节流，请执行以下操作：

1. 启动新连接，例如使用测试工具。
2. 在网络面板上，选择无节流，并通过连接发送消息。
3. 创建一个非常慢的自定义节流配置文件，例如 10 kbit/s。如此慢的配置文件可帮助您注意到差异。
4. 在网络面板上，选择相应配置文件并发送另一封邮件。
5. 切换 WS 过滤器，点击您的连接名称，打开消息标签页，然后查看在启用和未开启节流功能的情况下发送和回显的消息之间的时差。例如：

在“网络状况”抽屉式导航栏中模拟慢速网络连接

如果您在使用其他开发者工具面板时想要限制网络连接速度，请使用 网络状况抽屉式导航栏。

1. 点击 图标，打开 Network Conditions 抽屉式导航栏。
2. 从网络节流菜单中选择连接速度。

手动清除浏览器 Cookie

要随时手动清除浏览器 Cookie，请右键点击 Requests（请求）表格中的任意位置，然后选择 清除浏览器 Cookie。

替换 HTTP 响应标头

请参阅在本地替换文件和 HTTP 响应标头。

替换用户代理

若要手动替换用户代理，请执行以下操作：

1. 点击 图标，打开 Network Conditions 抽屉式导航栏。
2. 清除自动选择。
3. 从菜单中选择用户代理选项，或在框中输入自定义选项。

过滤请求

按资源过滤请求

使用 Filter 框可按资源（例如 请求。

如果您没有看到该框，则“过滤器”窗格可能已隐藏。请参阅隐藏“过滤条件”窗格。

要反转过滤器，请选中过滤框旁边的反转复选框。

您可以同时使用多个属性，只需用空格分隔每个属性即可。对于 例如，mime-type:image/gif larger-than:1K 会显示所有大于 1 千字节的 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。显示某个资源类型的资源，例如图片。DevTools 会在 并自动填充下拉菜单，并显示其遇到的所有资源类型。
• response-header-set-cookie。在“Issues”（问题）标签页中显示原始 Set-Cookie 标头。Cookie 格式错误 如果 Set-Cookie 标头不正确，则会在“Network”面板中进行标记。
• scheme。显示通过不受保护的 HTTP (scheme:http) 或受保护的 HTTPS 检索的资源 (scheme:https).
• set-cookie-domain。显示具有 Set-Cookie 标头且 Domain 属性的资源 与指定值匹配的列。DevTools 会使用所有 Cookie 填充自动填充下拉菜单 与所访问的域之间的关联。
• set-cookie-name。显示具有 Set-Cookie 标头且名称与 指定值。DevTools 会使用其具有的所有 Cookie 名称填充自动填充下拉菜单 错误。
• set-cookie-value。显示具有 Set-Cookie 标头且值匹配的资源 指定值。DevTools 会使用其具有的所有 Cookie 值填充自动填充下拉菜单 错误。
• status-code。仅显示 HTTP 状态代码与指定代码匹配的资源。DevTools 使用它遇到的所有状态代码填充自动填充下拉菜单。
• url。显示 url 与指定值匹配的资源。

按类型过滤请求

若要按请求类型过滤请求，请依次点击 All、Fetch/XHR、JS、CSS、Img、Media Font、Doc、WS (WebSocket)、Wasm (WebAssembly)、Manifest 或 Other（此处未列出的任何其他类型） 按钮位于网络面板上。

如果您看不到这些按钮，则表示“过滤器”窗格可能已隐藏。请参阅隐藏过滤器 窗格。

要同时启用多种类型的过滤条件，请按住 Command (Mac) 或 Ctrl（Windows、Linux）和 然后单击。

按时间过滤请求

在 Overview 窗格上向左或向右拖动，即可仅显示在 。该过滤条件包含在其中。在突出显示的时间段内有效的任何请求都会 。

隐藏数据网址

数据网址是嵌入到其他文档中的小文件。您在 以 data: 开头的 Requests 表为数据网址。

如需隐藏这些请求，请选中 隐藏数据网址。

底部的状态栏会显示所显示的请求数量占总数的百分比。

隐藏扩展程序网址

为了专注于您编写的代码，您可以滤除由 Chrome 中已安装的扩展程序发送的不相关请求。扩展程序请求中包含以 chrome-extension:// 开头的网址。

如需隐藏扩展程序请求，请勾选 隐藏扩展程序网址。

底部的状态栏会显示所显示的请求数量占总数的百分比。

仅显示带有被屏蔽的响应 Cookie 的请求

如需滤除所有内容（响应 Cookie 因任何原因被屏蔽的请求除外），请查看 已屏蔽的响应 Cookie。欢迎在此演示页面上试用。

底部的状态栏会显示所显示的请求数量占总数的百分比。

若要查找响应 Cookie 被屏蔽的原因，请选择相应请求，打开其 Cookie 标签页，然后将鼠标悬停在 信息图标上。

此外，网络面板还会在受第三方 Cookie 逐步淘汰计划影响或已豁免的请求旁边显示一个警告警告图标。将鼠标悬停在该图标上即可看到一条包含线索的提示，点击该提示即可转到问题面板以了解详情。

仅显示已屏蔽的请求

如需滤除除被屏蔽的请求之外的所有内容，请查看 已屏蔽的请求。若要对此进行测试，您可以使用网络请求屏蔽抽屉式导航栏标签页。

请求表格会以红色突出显示被屏蔽的请求。底部的状态栏会显示所显示的请求数量占总数的百分比。

仅显示第三方请求

若要过滤掉所有内容（来源与网页来源不同的请求除外），请查看 第三方请求。欢迎在此演示页面上试用。

底部的状态栏会显示所显示的请求数量占总数的百分比。

对请求进行排序

默认情况下，Requests（请求）表格中的请求会按开始时间排序，但您也可以对 表格。

按列排序

点击 Requests 表格中任意列的标题，即可按该列对请求进行排序。

按活动阶段排序

如需更改 Waterfall 对请求排序的方式，请右键点击 Requests 表格的标题，将鼠标悬停在 广告瀑布流，然后选择以下选项之一：

• 开始时间。启动的第一个请求位于顶部。
• 响应时间。开始下载的第一个请求位于顶部。
• 结束时间。完成的第一个请求位于顶部。
• 总时长。连接设置和请求 / 响应时间最短的请求位于 顶部。
• 延迟时间。等待最短响应时间的请求位于顶部。

这些说明假定各个选项按从最短时间到最长时间的顺序排列。点击 Waterfall 列标题中的顺序会反转。

在此示例中，广告瀑布流按总时长排序。每个条形的浅色部分代表时间 等待的时间。深色部分表示下载字节所用的时间。

分析请求

只要开发者工具处于打开状态，它就会在 Network 面板中记录所有请求。使用网络面板可以 来分析请求

查看请求日志

使用 Requests 表格查看开发者工具打开时发出的所有请求的日志。点击或 将鼠标悬停在请求上即可显示相关请求的更多信息。

默认情况下，Requests 表格会显示以下列：

• 名称：资源的文件名或标识符。

• 状态。此列可显示以下值：

  

  • HTTP 状态代码，例如 200 或 404。
  • 请求因跨域资源共享 (CORS) 而失败的 CORS error。
  • 如果请求的标头配置有误，则为 (blocked:origin)。将鼠标悬停在此状态值上，即可看到一条提示，其中包含关于问题所在的提示。
  • (failed)，后跟错误消息。

• 类型。所请求资源的 MIME 类型。

• Initiator：以下对象或进程可以发起请求：

  • 解析器。Chrome 的 HTML 解析器。
  • 重定向。HTTP 重定向。
  • 脚本。JavaScript 函数。
  • 其他。某些其他进程或操作，例如使用链接或输入 网址。

• 大小。响应标头与响应正文之和（由 服务器。

• 时间。从请求开始到接收最后一个字节的总时长， 响应。

• 广告瀑布流。每个请求活动的可视化明细。

添加或删除列

右键点击 Requests 表格的标题，然后选择隐藏或显示该表格。显示的选项旁有对勾标记。

您可以添加或移除以下其他列：路径、网址、方法、协议、架构、网域、远程地址、远程地址空间、启动器地址空间、Cookie、设置 Cookie、优先级、连接 ID、包含替换值和瀑布流。

添加自定义列

如需向 Requests 表格添加自定义列，请执行以下操作：

1. 右键点击 Requests 表的标题，然后选择 Response Headers >管理标头列。
2. 在对话框窗口中，点击添加自定义标头，输入其名称，然后点击添加。

按内嵌框架对请求进行分组

如果网页上的内联框架发起了大量请求，您可以将这些框架分组，使请求日志更便于访问。

若要按 iframe 对请求进行分组，请打开 Network 面板中的 Settings ，然后选中 Group by frame。

要查看内嵌框架发起的请求，请在请求日志中将其展开。

查看彼此相关的请求时间

使用广告瀑布流可查看彼此相关的请求时间。默认情况下， 广告瀑布流按照请求的开始时间进行整理。因此，位于最左边的请求 开始运行的时间要早于较右侧的那些项目

如需了解对广告瀑布流进行排序的不同方式，请参阅按活动阶段排序。

分析 WebSocket 连接的消息

如需查看 WebSocket 连接的消息，请执行以下操作：

1. 在 Requests 表格的 Name 列下方，点击 WebSocket 连接的网址。
2. 点击消息标签页。表格中会显示最近 100 条消息。

要刷新表格，请在名称列的 Requests 表格的集成。

该表格包含三列：

• Data 类中定义的列名称。消息载荷。如果消息为纯文本，则会显示在此处。二进制 操作码，此列会显示操作码的名称和代码。支持以下操作码： Continuation Frame、Binary Frame、Connection Close Frame、Ping Frame 和 Pong Frame。
• 长度。消息载荷的长度（以字节为单位）。
• 时间。接收或发送消息的时间。

消息根据其类型进行颜色编码：

• 外发文本消息为浅绿色。
• 传入的短信为白色。
• WebSocket 操作码为浅黄色。
• 错误为浅红色。

分析数据流中的事件

如需查看服务器通过 Fetch API、EventSource API 和 XHR 流式传输的事件，请执行以下操作：

1. 在流式传输事件的网页上记录网络请求。例如，打开此演示页面，然后点击这三个按钮中的任意一个即可。
2. 在网络中，选择一个请求并打开 EventStream 标签页。

要过滤事件，请在 EventStream 标签页顶部的过滤栏中指定一个正则表达式。

要清除已捕获事件的列表，请点击屏蔽 清除。

查看响应正文预览

如需查看响应正文的预览，请执行以下操作：

1. 在 Requests（请求）表格的 Name（名称）列下，点击相应请求的网址。
2. 点击预览标签页。

此标签页主要用于查看图片。

查看响应正文

如需查看请求的响应正文，请执行以下操作：

1. 在“Request”表格的 Name 列下，点击相应请求的网址。
2. 点击响应标签页。

查看 HTTP 标头

如需查看请求的 HTTP 标头数据，请执行以下操作：

1. 在 Requests（请求）表格中点击相应请求。
2. 打开 Headers 标签页，然后向下滚动到 General、Response Headers、Request Headers，以及 Early Hints Headers（可选）部分。

在常规部分中，开发者工具会在收到的 HTTP 状态代码旁边显示人类可读的状态消息。

在响应标头部分，您可以将鼠标悬停在标头值上，然后点击修改 修改按钮，在本地替换响应标头。

查看 HTTP 标头来源

默认情况下，Headers 标签页会按字母顺序显示标头名称。要查看 接收顺序：

1. 打开您感兴趣的请求的 Headers 标签页。请参阅查看 HTTP 标头。
2. 点击请求标头或响应标头部分旁边的查看来源。

临时标头警告

有时，Headers 标签页会显示 Provisional headers are shown... 警告消息。原因可能如下：

• 请求并未通过网络发送，而是由本地缓存提供的，本地缓存不会存储原始请求标头。在这种情况下，您可以停用缓存以查看完整的请求标头。

• 网络资源无效。例如，在控制台中执行 fetch("https://jec.fish.com/unknown-url/")。

出于安全考虑，开发者工具也可以仅显示临时标头。

查看请求载荷

如需查看请求的载荷（即其查询字符串参数和表单数据），请从 Requests 表中选择相应请求，并打开载荷标签页。

查看载荷来源

默认情况下，DevTools 以人类可读的形式显示载荷。

如需查看查询字符串参数和表单数据的来源，请在载荷标签页上，点击查询字符串参数或表单数据部分旁边的查看来源。

查看查询字符串参数的网址解码参数

如需切换参数的网址编码，请在载荷标签页上，点击查看解码后的内容或查看经过网址编码的内容。

查看 Cookie

要查看在请求的 HTTP 标头中发送的 Cookie，请执行以下操作：

1. 在“Request”表格的 Name 列下，点击相应请求的网址。
2. 点击 Cookies 标签。

如需了解各列，请参阅字段。

如需修改 Cookie，请参阅查看、修改和删除 Cookie。

查看请求的时间细分数据

如需查看请求的时间细分数据，请执行以下操作：

1. 在 Requests（请求）表格的 Name（名称）列下，点击相应请求的网址。
2. 点击计时标签页。

请参阅预览时间细分数据，以便更快地访问此数据。

请参阅有关时间细分阶段的说明，详细了解您要学习的各个阶段 计时标签页中显示的详细信息。

预览时间细分数据

若要预览某个请求的时间明细，请将鼠标悬停在 Requests 表格的 Waterfall 列。

请参阅查看请求的时间细分数据，了解如何访问不需要的数据 悬停。

时间细分阶段说明

下面详细介绍了您可能会在 Timing 标签页中看到的各个阶段：

• 队列。在开始连接之前以及满足以下条件时，浏览器会将请求加入队列：
  • 有更高优先级的请求。
  • 此源已打开六个 TCP 连接，达到上限。应用对象 仅限 HTTP/1.0 和 HTTP/1.1。
  • 浏览器正在短暂分配磁盘缓存中的空间。
• Stalled。请求可能会在连接开始后因队列中所述的任何原因而停止。
• DNS 查找。浏览器正在解析请求的 IP 地址。
• 初始连接。浏览器正在建立连接，包括 TCP 握手或重试 以及协商 SSL
• 代理协商。浏览器正与代理服务器协商请求。
• 已发送请求。正在发送请求。
• ServiceWorker 准备。浏览器正在启动 Service Worker。
• 对 ServiceWorker 的请求。正在将请求发送到 Service Worker。
• 等待 (TTFB)。浏览器正在等待响应的第一个字节。TTFB 代表时间 到第一个字节。此时间包括 1 次往返延迟时间以及服务器连接到 来准备响应
• 内容下载。浏览器正在直接从网络或来自 Service Worker 接收响应。此值是读取响应正文所花费的总时间。值大于预期值可能表示网络速度缓慢，或者浏览器正忙于执行其他工作，从而导致响应的读取延迟。

查看启动器和依赖项

如需查看请求的发起方和依赖项，请按住 Shift 键，并将鼠标悬停在 请求表。开发者工具会将发起者的颜色设置为绿色，将依赖项颜色设置为红色。

当 Requests 表格按时间先后顺序排列时，第一个绿色请求位于 即是依赖项的发起者如果上方还有另一个绿色请求 更高的请求是发起者的发起者。等等。

查看加载事件

开发者工具会在DOMContentLoadedload 网络面板。DOMContentLoaded 事件显示为蓝色，load 事件显示为红色。

查看请求总数

请求总数列在 Network 面板底部的 Summary 窗格中。

注意：注意：此数字仅跟踪自开发者工具打开后记录的请求。如果 其他请求是在开发者工具打开之前发生的，这些请求不会计算在内。

查看已传输和已加载的资源的总大小

开发者工具会在 Network 面板底部的 Summary 窗格中列出已传输和已加载（未压缩）的资源的总大小。

注意：注意：此数字仅跟踪自开发者工具打开后记录的请求。如果 其他请求是在开发者工具打开之前发生的，这些请求不会计算在内。

要了解浏览器解压缩后的资源大小，请参阅查看未压缩的资源大小。

查看导致请求的堆栈轨迹

当 JavaScript 语句导致请求资源时，将鼠标悬停在 Initiator（发起者）列上 查看导致请求的堆栈轨迹。

查看未压缩的资源大小

查看设置 >大请求行，然后查看 Size 列的底部值。

在此示例中，通过网络发送的 www.google.com 文档的压缩大小为 43.8 KB，而未压缩的大小为 136 KB。

导出请求数据

将所有网络请求保存到 HAR 文件中

HAR（HTTP 归档）是一种文件格式，供多种 HTTP 会话工具用来导出捕获的数据。格式是包含一组特定字段的 JSON 对象。

您可以通过以下两种方式将所有网络请求保存到 HAR 文件中：

• 右键点击 Requests（请求）表格中的任意请求，然后选择 Save all as HAR with content（全部另存为 HAR 文件）。
• 点击 Network 面板顶部的操作栏中的 Export HAR。

。

注意：开发者工具会将自您打开开发者工具后发生的所有请求导出到 HAR 文件中。您无法过滤要导出的请求。如需保存单个请求，请参阅将一个或多个请求复制到剪贴板。

创建 HAR 文件后，您可以通过以下两种方式将其重新导入开发者工具以进行分析：

• 将 HAR 文件拖放到请求表格中。
• 点击 Network 面板顶部的操作栏中的 Import HAR。

。

注意：网络面板会读取并显示从 HAR 文件中导入的请求的发起者。

将一个或多个请求复制到剪贴板

在 Requests 表格的 Name 列下方，右键点击相应请求，将光标悬停在 Copy 上，然后 从下列选项中选择一项：

• 复制网址。将请求的网址复制到剪贴板。
• 以 c网址 格式复制。以 c网址 命令的形式复制请求。
• Copy as PowerShell。以 PowerShell 命令的形式复制请求。
• 以提取形式复制。以提取调用的形式复制请求。

• 以 Node.js 提取形式复制。以 Node.js 提取调用的形式复制请求。

  ---

• 复制回答。将响应正文复制到剪贴板。

  ---

• 复制所有网址。将所有请求的网址复制到剪贴板。

• 以 c网址 格式复制所有内容。以一系列 c网址 命令的形式复制所有请求。

• 以 PowerShell 格式复制所有内容。以 PowerShell 命令链的形式复制所有请求。

• 以提取形式复制所有内容。以提取调用链的形式复制所有请求。

• 以 Node.js 提取格式复制全部内容。以 Node.js 提取调用链的形式复制所有请求。

• 全部复制为 HAR 格式。以 HAR 数据的形式复制所有请求。

更改“网络”面板的布局

展开或收起网络面板界面的各个部分，以突出您认为重要的部分。

隐藏“过滤条件”窗格

默认情况下，DevTools 会显示 Filters 窗格。点击过滤 将其隐藏。

使用大请求行

如果您想在网络请求表中添加更多空格，请使用大行。有些列还 提供更多信息。例如， Size 列显示未经压缩的请求大小，Priority 列显示初始（最低值）和最终（最高值）提取优先级。

打开设置 ，然后点击大请求行以查看大行。

隐藏“概览”轨道

默认情况下，开发者工具会显示 Overview 轨道。打开设置 并清除显示概览复选框以将其隐藏。