网络功能参考

Sofia Emelianova
Sofia Emelianova

在此关于 Chrome 开发者工具网络分析功能的综合参考中,探索分析页面加载方式的新方法。

录制网络请求

默认情况下,只要开发者工具已打开,开发者工具会在 Network 面板中记录所有网络请求。

“网络”面板。

停止记录网络请求

如需停止录制请求,请执行以下操作:

  • 点击 Network 面板上的 Stop recording network log(停止录制网络日志)停止录制网络。。该图标变为灰色,表示开发者工具不再记录请求。
  • Network 面板处于焦点状态时,按 Command> + E (Mac) 或 Control + E (Windows、Linux)。

清除请求

点击 Network 面板上的 Clear 图标 清除。,以清除 Requests 表格中的所有请求。

“清除”按钮。

跨页面加载保存请求

如需跨页面加载保存请求,请勾选 Network 面板上的 Preserve log 复选框。在您停用 Preserve log 之前,DevTools 会保存所有请求。

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

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

如需启用屏幕截图,请打开 Network 面板中的 Settings 设置。,然后选中 Capture screenshots

Network 面板处于焦点状态时重新加载页面以捕获屏幕截图。

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

  • 将鼠标指针悬停在屏幕截图上,即可查看捕获该屏幕截图的时间点。Overview 时间轴上会显示一条黄线。
  • 点击屏幕截图的缩略图以过滤掉在截取屏幕截图后发生的所有请求。
  • 双击缩略图可放大。

已启用屏幕截图功能。

重放 XHR 请求

如需重放 XHR 请求,请在 Requests 表格中执行以下操作之一:

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

选择“重放 XHR”。

更改加载行为

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

若要模拟新用户访问您网站的体验,请勾选停用缓存复选框。 DevTools 会停用浏览器缓存。这样可以更准确地模拟新用户的体验,因为之前在重复访问时请求是通过浏览器缓存提供。

“停用缓存”复选框。

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

如果在使用其他 DevTools 面板时想要停用缓存,请使用 Network conditions 抽屉式导航栏。

  1. 点击 网络状况。 图标打开 Network Conditions 抽屉式导航栏。
  2. 勾选或清除 Disable cache(禁用缓存)复选框。

手动清除浏览器缓存

如需随时手动清除浏览器缓存,请右键点击 Requests 表格中的任意位置,然后选择 Clear browser cache

选择 Clear Browser Cache。

离线模拟

有一类名为渐进式 Web 应用的新 Web 应用,可在Service Worker 的帮助下离线运行。构建此类应用后,它能够快速模拟无数据连接的设备,非常有用。

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

从下拉菜单中选择“离线”。

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

模拟慢速网络连接

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

包含预设的网络节流下拉菜单。

DevTools 会在 Network 面板旁边显示一个警告图标,以提醒您已启用节流。

创建自定义节流配置文件

除了“4G 网络慢速”或“4G 网络快速”等预设之外,您还可以添加自己的自定义节流配置文件:

  1. 打开节流菜单,然后依次选择自定义 > 添加...
  2. 按照 设置 > 节流中的说明设置新的节流配置文件。
  3. 返回网络面板,从限制下拉菜单中选择您的新配置文件。

    从节流菜单中选择的自定义配置文件。网络面板会显示警告图标。

DevTools 会在 Network 面板旁边显示 警告。 警告图标,以提醒您已启用节流。

限制 WebSocket 连接

除了 HTTP 请求之外,从版本 99 开始,DevTools 还会节流 WebSocket 连接。

如需观察 WebSocket 节流,请执行以下操作:

  1. 启动新连接,例如使用测试工具
  2. Network 面板中,选择 No throttling(不节流),然后通过连接发送消息。
  3. 创建一个速度非常慢的自定义节流配置文件,例如 10 kbit/s。如此慢的配置文件可帮助您注意到不同之处。
  4. 网络面板上,选择相应配置文件并发送另一封邮件。
  5. 切换 WS 过滤条件,点击您的连接名称,打开消息标签页,然后检查在启用和停用节流的情况下,发送的消息和回声消息之间的时间差。例如:

在启用和不启用节流限制的情况下发送和回显的消息。

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

如果在使用其他 DevTools 面板时想要限制网络连接速度,请使用 Network conditions 抽屉式导航栏。

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

手动清除浏览器 Cookie

若要随时手动清除浏览器 Cookie,请右键点击 Requests 表格中的任意位置,然后选择 Clear browser cookies

选择 Clear Browser Cookies。

替换 HTTP 响应标头

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

替换用户代理

如需手动替换用户代理,请执行以下操作:

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

如需在请求标头、载荷和响应中进行搜索,请执行以下操作:

  1. 按以下快捷键可打开右侧的搜索标签页:

    • 在 macOS 中,按 Command + F
    • 在 Windows 或 Linux 上,按 Control + F
  2. 搜索标签页中,输入您的查询,然后按 Enter 键。(可选)点击 ,分别启用区分大小写的功能或正则表达式。

  3. 点击其中一个搜索结果。网络面板以黄色突出显示匹配的请求。此外,该面板还会打开 Headers(标头)或 Response(响应)标签页,并突出显示匹配的字符串(如果有)。

“广告网络”面板右侧的“搜索”标签页。

如需刷新搜索结果,请点击 刷新。如需清除结果,请依次点击 清除

如需详细了解在 DevTools 中搜索的所有方式,请参阅搜索:在所有已加载的资源中查找文本

过滤请求

按属性过滤请求

使用过滤框,按请求的域或大小等属性过滤请求。

如果您看不到该框,则表明 Filters 栏可能已隐藏。请参阅隐藏过滤条件栏

“过滤条件”文本框和“反转”复选框。

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

您可以通过空格分隔每个属性,以同时使用多个属性。例如,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 结尾的所有域名的资源。DevTools 会使用其遇到的所有网域填充自动填充下拉菜单。
  • has-overrides。显示已替换 contentheaders、任何替换项 (yes) 或未替换任何替换项 (no) 的请求。您可以向请求表格中添加相应的是否有替换项
  • has-response-header。显示包含指定 HTTP 响应标头的资源。 DevTools 会使用其遇到的所有响应标头填充自动填充下拉菜单。
  • is。使用 is:running 查找 WebSocket 资源。
  • larger-than。显示大于指定大小的资源(以字节为单位)。设置 1000 的值等同于设置 1k 的值。
  • method。显示通过指定 HTTP 方法类型检索的资源。DevTools 会使用其遇到的所有 HTTP 方法填充自动填充下拉菜单。
  • mime-type:显示指定 MIME 类型的资源。开发者工具会使用遇到的所有 MIME 类型填充自动填充下拉菜单。
  • mixed-content。显示所有混合内容资源 (mixed-content:all),或者仅显示显示的资源 (mixed-content:displayed)。
  • priority。显示优先级级别与指定值匹配的资源。
  • resource-type。显示某种资源类型(例如图片)的资源。DevTools 会使用其遇到的所有资源类型填充自动填充下拉菜单。
  • response-header-set-cookie。在“问题”标签页中显示原始 Set-Cookie 标头。如果 Cookie 格式错误且 Set-Cookie 标头有误,系统会在“网络”面板中标记该 Cookie。
  • 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 与指定值匹配的资源。

按类型过滤请求

若要按资源类型过滤请求,请在 Network 面板上点击 AllFetch/XHRJSCSSImgMediaFontDocWS (WebSocket)、Wasm (WebAssembly)、ManifestOther(此处未列出的任何其他类型)按钮。

如果您看不到这些按钮,可能是因为过滤器操作栏被隐藏了。请参阅隐藏过滤条件栏

如需同时显示多种类型的资源,请按住 Command(Mac)或 Control(Windows、Linux),然后点击多个类型过滤器。

使用类型过滤器显示 CSS 和文档资源。

按时间过滤请求

概览时间轴上向左或向右拖动,即可仅显示在指定时间范围内处于活动状态的请求。过滤条件是包含在其中。在突出显示的时间内处于活动状态的任何请求都将显示。

过滤掉在 21-25 毫秒左右处于非活动状态的所有请求。

隐藏数据网址

数据网址是嵌入到其他文档中的小文件。您在 Requests 表格中看到的以 data: 开头的所有请求都是数据网址。

如需隐藏这些请求,请在过滤条件操作栏中,依次选择更多过滤条件 > 隐藏数据网址

从“请求”表中隐藏的数据网址。

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

隐藏扩展程序网址

为了专注于您编写的代码,您可以滤除 Chrome 中可能安装的扩展程序发送的无关请求。扩展请求的网址以 chrome-extension:// 开头。

如需隐藏扩展程序请求,请在过滤条件操作栏中,依次选择更多过滤条件 > 隐藏扩展程序网址

扩展程序网址从“请求”表格中隐藏。

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

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

如需滤除所有请求(除了因任何原因而被屏蔽响应 Cookie 的请求),请在过滤条件操作栏中,依次选择更多过滤条件 > 被屏蔽的响应 Cookie。欢迎在此演示页面上试用。

“请求”表格仅显示带有被屏蔽的响应 Cookie 的请求。

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

如需了解响应 Cookie 被屏蔽的原因,请选择相应请求,打开其 Cookies 标签页,然后将鼠标悬停在 信息图标上。

此外,如果请求的 Cookie 因 Chrome flag 或配置而被屏蔽,网络面板会在相应请求旁边显示警告图标。将鼠标悬停在该图标上即可看到一条包含线索的提示,点击该提示即可转到问题面板以了解详情。

被 Chrome flag 或配置屏蔽的请求旁边的警告图标。

仅显示已屏蔽的请求

如需滤除被屏蔽的请求以外的所有内容,请在过滤条件操作栏中,依次选择更多过滤条件 > 被屏蔽的请求。如需进行测试,您可以使用抽屉式菜单中的网络请求屏蔽标签页。

“请求”表格仅显示被屏蔽的请求。

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

仅显示第三方请求

如需滤除除来源与网页来源不同的请求之外的所有请求,请在过滤条件操作栏中,依次选择更多过滤条件 > 第三方请求。欢迎在此演示页面上试用。

“请求”表仅显示第三方请求。

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

对请求排序

默认情况下,请求表格中的请求按发起时间进行排序,但您可以使用其他标准对此表格排序。

按列排序

点击 Requests 表格中任何列的标题,可以按该列对请求排序。

按活动阶段排序

若要更改按瀑布图对请求排序的方式,请右键点击“请求”表格的表头,将鼠标指针悬停在瀑布图上,然后选择以下选项之一:

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

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

在此示例中,广告瀑布流是按总时长排序的。每个条形的浅色部分表示等待的时间。深色部分表示下载以字节为单位的内容所花费的时间。

按总时长对瀑布图排序。

分析请求

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

查看请求日志

使用 Requests 表格可以查看 DevTools 打开时发出的所有请求的日志。点击请求或将鼠标指针悬停在请求上将显示这些请求的更多信息。

“请求”表。

默认情况下,“请求”表格会显示以下列:

  • 名称:资源的文件名或标识符。
  • 状态。此列可以显示以下值:

    “状态”列中的值不同。

    • HTTP 状态代码,例如 200404
    • 由于跨域资源共享 (CORS),请求的 CORS error 失败。
    • 如果请求的标头配置有误,则为 (blocked:origin)。将鼠标悬停在此状态值上,即可看到一个工具提示,其中会提示问题所在。
    • (failed) 后跟错误消息。
  • 类型。请求的资源的 MIME 类型。

  • 发起者。以下对象或进程可以发起请求:

    • 解析器。Chrome 的 HTML 解析器。
    • 重定向。HTTP 重定向。
    • 脚本。JavaScript 函数。
    • 其他。某些其他进程或操作,比如使用链接导航到某页面或在地址栏中输入网址。
  • 大小。响应标头及响应正文(由服务器提供)的组合大小。

  • 时间。从请求开始至在响应中接收到最终字节的总持续时间。

  • 广告瀑布流。各请求相关活动的直观分析图。

添加或删除列

右键点击 Requests 表格的表头,然后选择一个选项以便隐藏或显示此表头。显示的选项旁边会显示对勾标记。

在 Requests 表格中添加或移除列。

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

添加自定义列

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

  1. 右键点击 Requests 表格的表头,然后依次选择 Response Headers > Manage Header Columns
  2. 在对话框窗口中,点击添加自定义标头,输入其名称,然后点击添加

在“Request”表格中添加一个自定义列。

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

如果网页上的内联框架发起大量请求,您可以将这些框架分组,使请求日志更简单易用。

如需按 iframe 对请求进行分组,请打开 Network 面板中的 Settings 设置。,然后选中 Group by frame

网络请求日志,其中请求按 iframe 分组。

如需查看内嵌框架发起的请求,请在请求日志中展开相应请求。

查看彼此相关的请求时间

使用瀑布图可以查看彼此相关的请求时间。默认情况下,广告瀑布流按请求的开始时间进行排列。因此,左侧请求的开始时间比右侧请求早。

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

“请求”标签页的“Waterfall”列。

分析 WebSocket 连接的消息

若要查看 WebSocket 连接的消息,请执行以下操作:

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

若要刷新表格,请在 Requests 表格的 Name 列下重新点击 WebSocket 连接名称。

“消息”标签页。

该表格包含三列:

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

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

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

分析数据流中的事件

如需查看服务器通过 Fetch APIEventSource API 和 XHR 流式传输的事件,请执行以下操作:

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

EventStream 标签页。

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

如需清除捕获的事件列表,请依次点击 清除

预览响应正文

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

  1. Requests 表格的 Name 列下,点击相应请求的网址。
  2. 点击预览标签页。

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

“预览”标签页。

查看响应正文

若要查看请求的响应正文,请执行以下操作:

  1. 在“请求”表格的名称列下,点击相应请求的网址。
  2. 点击回复标签页。

“Response”标签页。

查看 HTTP 标头

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

  1. 点击请求表格中的相应请求。
  2. 打开 Headers 标签页,然后向下滚动到 GeneralResponse HeadersRequest Headers,以及 Early Hints Headers(可选)部分。

从“请求”表格中选择的请求的“标头”标签页。

常规部分,DevTools 会在收到的 HTTP 状态代码旁边显示人类可读的状态消息。

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

查看 HTTP 标头源

默认情况下,Headers 标签页会按字母顺序显示标头名称。如需按接收顺序查看 HTTP 标头名称,请执行以下操作:

  1. 打开您感兴趣的请求的 Headers 标签页。请参阅查看 HTTP 标头
  2. 点击 Request HeaderResponse Header 部分旁边的 view source

预配标头警告

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

  • 该请求并非通过网络发送,而是从本地缓存提供,其中不会存储原始请求标头。在这种情况下,您可以停用缓存以查看完整请求标头。预配标头警告消息。

  • 网络资源无效。例如,在控制台中执行 fetch("https://jec.fish.com/unknown-url/")预配标头警告消息。

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

查看请求载荷

如需查看请求的载荷(即其查询字符串参数和表单数据),请从请求表中选择一个请求,然后打开载荷标签页。

“载荷”标签页。

查看载荷来源

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

如需查看查询字符串参数和表单数据的来源,请在 Payload 标签页中,点击 Query String ParametersForm Data 部分旁边的 view source

“查看来源”按钮。

查看查询字符串参数的已解码参数

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

切换网址编码。

查看 Cookie

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

  1. 在“请求”表格的名称列下,点击相应请求的网址。
  2. 点击 Cookies 标签。

“Cookies”标签页。

如需了解各列的说明,请参阅字段

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

查看请求的时间细分数据

若要查看请求的时间细分数据,请执行以下操作:

  1. Requests 表格的 Name 列下,点击相应请求的网址。
  2. 点击时间标签页。

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

“时间”标签页。

如需详细了解您可能会在时间标签页中看到的各个阶段,请参阅时间细分阶段说明

预览时间细分数据

若要预览请求的时间细分数据,请将鼠标指针悬停在 Requests 表格 Waterfall 列中的请求条目上。

请参阅查看请求的时间细分数据,了解不需要悬停即可访问此数据的方法。

预览请求的时间细分数据。

时间细分阶段说明

以下是有关在 Timing 标签页中可能看到的各个阶段的更多信息:

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

查看启动器和依赖项

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

查看请求的发起者和依赖项。

Requests 表格按时间顺序排列时,您将鼠标悬停在的请求上方的第一个绿色请求将是依赖项的发起者。如果该请求上方还有另一个绿色请求,则更高的请求是发起者的发起者。等等。

查看加载事件

DevTools 将在 Network 面板的多个位置显示 DOMContentLoadedload 事件的时间。DOMContentLoaded 事件的颜色为蓝色,load 事件的颜色为红色。

Network 面板上 DOMContentLoaded 和 load 事件的位置。

查看请求总数

Network 面板底部的状态栏中列出了请求总数。

自 DevTools 打开以来的请求总数。

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

DevTools 会在 Network 面板底部的状态栏中列出传输和加载(未压缩)的资源的总大小。

传输和加载的资源的总大小。

如需了解浏览器解压缩后的资源大小,请参阅查看未压缩的资源大小

查看导致请求的堆栈轨迹

当 JavaScript 语句导致资源请求时,将鼠标指针悬停在 Initiator 列上,以查看导致请求的堆栈轨迹。

导致资源请求的堆栈轨迹。

查看未压缩的资源大小

依次选择设置 设置。 > 大请求行,然后查看大小列底部的值。

未压缩资源示例。

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

导出请求数据

您可以通过下文介绍的几种方式导出或复制已应用过滤条件的请求列表。

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

HAR(HTTP 归档)是多种 HTTP 会话工具用来导出所记录数据的一种文件格式。这种格式是 JSON 对象,并具有一组特定的字段。

为了降低意外泄露敏感信息的几率,默认情况下,您可以以 HAR 格式导出“经过处理的”网络日志,其中要排除 CookieSet-CookieAuthorization 标头等敏感信息。如果需要,您还可以导出包含敏感数据的日志。

如需将所有网络请求保存到 HAR 文件中,请选择以下两种方式之一:

  • 右键点击 Requests(请求)表格中的任意请求,然后依次选择 Copy(复制)> Save all [listed] as HAR (sanitated)(将所有 [列示的] 保存为 HAR(已清理)或将所有 [list] 保存为 HAR(包含敏感数据)

    选择“以 HAR 格式保存列出的所有数据(已清理)”。

  • 点击 Network(网络)面板顶部操作栏中的 Export HAR (sanitized)...(导出经过脱敏处理的 HAR...)。

    如需导出包含敏感数据的 HAR,请先依次前往 设置 > 偏好设置 > 网络 > 允许生成包含敏感数据的 HAR,然后长按 导出按钮,然后选择导出 HAR(包含敏感数据)

    顶部操作栏中的“导出 HAR”按钮,其中启用了两个导出选项。

获得 HAR 文件后,您可以通过以下两种方式将其导回 DevTools 进行分析

  • 将 HAR 文件拖放到 Requests 表格中。
  • 点击网络面板顶部的操作栏中的 导入 HAR

将请求、一组经过过滤的请求或所有请求复制到剪贴板

Requests 表格的 Name 列下,右键点击某个请求,将鼠标指针悬停在 Copy 上,然后选择以下选项之一。

如需复制单个请求、其响应或堆栈轨迹,请执行以下操作:

  • 复制网址。将请求的网址复制到剪贴板。
  • 复制为 c网址 格式。以 c网址 命令形式复制请求。
  • 以 PowerShell 格式复制。以 PowerShell 命令形式复制请求。
  • 复制为提取。以提取调用形式复制请求。
  • 复制即提取 (Node.js)。以 Node.js 提取调用的形式复制请求。
  • 复制回复。将响应正文复制到剪贴板。
  • 复制堆栈轨迹。将请求的堆栈轨迹复制到剪贴板。

如需复制所有请求,请执行以下操作:

  • 复制所有网址。将所有请求的网址复制到剪贴板。
  • 全部复制为 c网址 格式。以一系列 c网址 命令形式复制所有请求。
  • 以 PowerShell 格式复制全部内容。以 PowerShell 命令链的形式复制所有请求。
  • 以提取格式复制全部内容。以一系列提取调用形式复制所有请求。
  • 以提取格式复制 (Node.js)。以一系列 Node.js 提取调用形式复制所有请求。
  • 全部复制为 HAR(已清理)。以不含敏感数据(例如 CookieSet-CookieAuthorization 标头)的 HAR 数据的形式复制所有请求。
  • 以 HAR 格式复制所有内容(含敏感数据)。以包含敏感数据的 HAR 数据形式复制所有请求。

用于复制所有请求的选项。

如需复制一组经过过滤的请求,请对网络日志应用过滤条件,然后右键点击某个请求,然后选择:

  • 复制所有列出的网址。将所有已过滤请求的网址复制到剪贴板。
  • 以 c网址 格式复制列出的所有数据。以一系列 c网址 命令形式复制所有已过滤的请求。
  • 复制列出的所有 PowerShell 命令。以一系列 PowerShell 命令形式复制所有已过滤的请求。
  • 复制列为提取内容的所有内容。以一连串提取调用的形式复制所有过滤出的请求。
  • 复制所有列出的“提取 (Node.js)”内容。以一系列 Node.js 提取调用形式复制所有已过滤的请求。
  • 以 HAR(已清理)格式复制列出的所有数据。以 HAR 数据形式复制所有已过滤的请求,其中不包含 CookieSet-CookieAuthorization 标头等敏感数据。
  • 复制列为 HAR 的所有内容(含敏感数据)。以包含敏感数据的 HAR 数据形式复制所有过滤后的请求。

过滤后的一组请求的复制选项。

更改“Network”面板的布局

展开或折叠 Network 面板界面的各个部分以关注您注重的内容。

隐藏“过滤条件”操作栏

默认情况下,DevTools 会在 Network 面板顶部显示 Filters 栏。点击 Filter 即可将其隐藏。

“隐藏过滤条件”按钮。

使用大请求行

想要在网络请求表格中添加更多空格时,可以使用大行。使用大行时,某些列还会提供更多信息。例如,大小列底部的值是请求的未压缩大小,优先级列会同时显示初始(底部值)和最终(顶部值)提取优先级。

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

已启用大请求行。

隐藏“概览”轨道

默认情况下,DevTools 会显示概览轨道。打开设置 设置。 并清除显示概览复选框以将其隐藏。

“显示概览”复选框。