Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

网络分析参考

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

注:本参考是以 Chrome 58 为基础。如果您使用其他版本的 Chrome,DevTools 的界面和功能可能有所不同。 请访问 chrome://help 以了解您运行的 Chrome 版本。

记录网络请求

默认情况下,只要 DevTools 处于打开状态,DevTools 就会在 Networ 面板中记录所有网络请求。

Network 面板。
图 1. Network 面板

停止记录网络请求

若要停止记录请求:

  • 在 Network 面板上点击 Stop recording network log 停止记录网络日志 {: .devtools-inline } 。 随后此图标变为灰色,表示 DevTools 不再记录请求。
  • 在 Network 面板处于焦点状态时,按 Command+E (Mac) 或 Control+E(Windows、Linux)。

清除请求

在 Network 面板上点击 Clear 清除,{:.devtools-inline} 以清除 Requests 表格中的所有请求。

Clear 按钮。
图 2. 添加蓝色边框的 Clear 按钮

跨页面加载保存请求

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

Preserve Log 复选框。
图 3. 添加蓝色边框的 Preserve Log 复选框

在页面加载期间捕获屏幕截图

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

要启用屏幕截图,请点击 Network 面板上的 Capture screenshots 捕获屏幕截图 {: .devtools-inline } 。 此图标启用后即变为蓝色。

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

捕获后,您可以通过以下方式与屏幕截图进行交互:

  • 将鼠标指针悬停在屏幕截图上以查看捕获屏幕截图的时间点。 Overview 窗格中将显示一条黄线。
  • 点击屏幕截图的缩略图以过滤捕获屏幕截图后出现的任何请求。
  • 双击缩略图进行放大。
将鼠标指针悬停在屏幕截图上。
图 4. 将鼠标指针悬停在屏幕截图上。 Overview 窗格和 Waterfall 中的黄色垂直线表示捕获屏幕截图的时间。

重播 XHR 请求

若要重播 XHR 请求,请右键点击 Requests 表格中的请求,然后选择 Replay XHR

选择 Replay XHR。
图 5. 选择 Replay XHR

更改加载行为

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

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

Disable Cache 复选框。
图 6. 添加蓝色边框的 Disable Cache 复选框

在 Network Conditions 抽屉式导航栏中停用浏览器缓存

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

  1. 打开 Network Conditions 抽屉式导航栏
  2. 勾选或取消选中 Disable cache 复选框。

手动清除浏览器缓存

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

选择 Clear Browser Cache。
图 7. 选择 Clear Browser Cache

离线模拟

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

勾选 Offline 复选框以模拟完全离线的网络体验。

Offline 复选框
图 8. 添加蓝色边框的 Offline 复选框

模拟慢速网络连接

Network Throttling 菜单中模拟 2G、3G 和其他连接速度。

Network Throttling 菜单。
图 9. 添加蓝色边框的 Network Throttling 菜单

您可以从各种预设中进行选择,例如 Regular 2G 或 Good 2G。 您还可以通过打开 Network Throttling 菜单并选择 Custom > Add 来添加自己的自定义预设。

DevTools 会在 Network 标签旁显示一个警告图标,以提醒您已启用限制。

在 Network Conditions 抽屉式导航栏中模拟慢速网络连接

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

  1. 打开 Network Conditions 抽屉式导航栏
  2. Network Throttling 菜单中选择所需连接速度。

手动清除浏览器 Cookie

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

选择 Clear Browser Cookies。
图 10. 选择 Clear Browser Cookies

替换用户代理

若要手动替换用户代理:

  1. 打开 Network Conditions 抽屉式导航栏
  2. 取消选中 Select automatically
  3. 从菜单中选择用户代理选项,或在文本框中输入自定义选项。

过滤请求

按属性过滤请求

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

如果看不到文本框,则表明 Filters 窗格可能已隐藏。 请参阅隐藏 Filters 窗格

Filters 文本框。
图 11. 添加蓝色边框的 Filters 文本框

您可以通过空格分隔每个属性,以同时使用多个属性。 例如,mime-type:image/gif larger-than:1K 显示大于一千字节的所有 GIF。 这些多属性过滤器等同于 AND 操作。 目前不支持 OR 操作。

下面是支持的属性的完整列表。

  • domain。 仅显示来自指定域的资源。 您可以使用通配符字符 (*) 纳入多个域。 例如,*.com 将显示来自以 .com 结尾的所有域名的资源。 DevTools 会使用其遇到的所有域填充自动填充下拉菜单。
  • has-response-header。 显示包含指定 HTTP 响应标头的资源。 DevTools 会使用其遇到的所有响应标头填充自动填充下拉菜单。
  • is。 使用 is:running 可以查找 WebSocket 资源。
  • larger-than。 显示大于指定大小的资源(以字节为单位)。 将值设为 1000 等同于设置为 1k
  • method。 显示通过指定 HTTP 方法类型检索的资源。 DevTools 会使用其遇到的所有 HTTP 方法填充下拉菜单。
  • mime-type。 显示指定 MIME 类型的资源。 DevTools 会使用其遇到的所有 MIME 类型填充下拉菜单。
  • mixed-content。 显示所有混合内容资源 (mixed-content:all),或者仅显示当前显示的资源 (mixed-content:displayed)。
  • 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 会使用其遇到的所有状态代码填充自动填充下拉菜单。

按类型过滤请求

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

如果您看不到这些按钮,则表明 Filters 窗格可能已隐藏。 请参阅隐藏 Filters 窗格

若要同时启用多个类型的过滤器,请按住 Command (Mac) 或 Control(Windows、Linux),然后点击相应的过滤器。

使用 Type 过滤器显示 JS、CSS 和 Doc[ument] 资源。
图 12. 使用 Type 过滤器显示 JS、CSS 和 Doc[ument] 资源。

按时间过滤请求

在 Overview 窗格中点击并向左或向右拖动,可以仅显示在指定时间范围内处于活动状态的请求。 过滤器是包含在其中。 在突出显示的时间内处于活动状态的任何请求都将显示。

过滤掉在 2500 毫秒左右处于非活动状态的所有请求。
图 13. 过滤掉在 2500 毫秒左右处于非活动状态的所有请求

隐藏数据网址

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

勾选 Hide data URLs 复选框可以隐藏这些请求。

Hide Data URLs 复选框。
图 14. Hide Data URLs 复选框

对请求排序

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

按列排序

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

按活动阶段排序

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

  • Start Time。 发出的第一个请求位于顶部。
  • Response Time。 开始下载的第一个请求位于顶部。
  • End Time。 完成的第一个请求位于顶部。
  • Total Duration。 连接设置时间和请求/响应时间最短的请求位于顶部。
  • Latency。 等待最短响应时间的请求位于顶部。

上述描述假设各自选项是按照从最短时间到最长时间的顺序排列。 点击 Waterfall 列标题会反转次序。

按总持续时间对瀑布图排序。
图 15. 按总持续时间对瀑布图排序。 各条形图的浅色部分表示等待的时间。 深色部分表示下载以字节为单位的内容所花费的时间。

分析请求

只要 DevTools 处于打开状态,便会在 Network 面板中记录所有请求。 使用 Network 面板分析请求。

查看请求日志

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

Requests 表格。
图 16. 添加蓝色边框的 Requests 表格

默认情况下,Requests 表格会显示以下列:

  • Name。 资源的文件名或标识符。
  • Status。 HTTP 状态代码。
  • Type。 已请求资源的 MIME 类型。
  • Initiator。 以下对象或进程可以发起请求:
    • Parser。 Chrome 的 HTML 解析器。
    • Redirect。 HTTP 重定向。
    • Script。 JavaScript 函数。
    • Other。 某些其他进程或操作,比如通过链接或者在地址栏中输入网址导航到某页面。
  • Size。 响应标头及响应正文(由服务器提供)的组合大小。
  • Time。 从请求开始至在响应中接收到最终字节的总持续时间。
  • Waterfall。 各请求相关活动的直观分析图。

添加或移除列

右键点击 Requests 表格的表头,然后选择一个选项以便隐藏或显示此选项。 当前显示的选项旁有复选标记。

在 Requests 表格中添加列。
图 17. 在 Requests 表格中添加列。

添加自定义列

若要在 Requests 表格中添加自定义列,请右键点击 Requests 表格的表头,然后选择 Response Headers > Manage Header Columns

在 Requests 表格中添加自定义列。
图 18. 在 Requests 表格中添加自定义列。

查看彼此相关的请求时间

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

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

Requests 窗格的 Waterfal 列。
图 19. Requests 窗格的 Waterfal 列。

分析 WebSocket 连接的帧

若要查看 WebSocket 连接的帧:

  1. 在 Requests 表格的 Name 列下,点击 WebSocket 连接的网址。
  2. 点击 Frames 标签。 表格中将显示最后 100 帧。

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

Frames 标签。
图 20. 添加蓝色边框的 Frames 标签

表格中包含以下三列:

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

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

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

预览响应正文

若要预览响应正文:

  1. 在 Requests 表格的 Name 列下,点击请求的网址。
  2. 点击 Preview 标签。

此标签主要用于查看图像。

Preview 标签。
图 21. 添加蓝色边框的 Preview 标签

查看响应正文

若要查看请求的响应正文:

  1. 在 Requests 表格的 Name 列下,点击请求的网址。
  2. 点击 Response 标签。
Response 标签。
图 22. 添加蓝色边框的 Response 标签

查看 HTTP 标头

若要查看有关请求的 HTTP 标头数据:

  1. 在 Requests 表格的 Name 列下,点击请求的网址。
  2. 点击 Headers 标签。
Headers 标签。
图 23. 添加蓝色边框的 Headers 标签

查看 HTTP 标头源

默认情况下,Headers 标签按字母顺序显示标头名称。 按收到的顺序查看 HTTP 标头名称:

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

查看查询字符串参数

若要以用户可读的格式查看网址的查询字符串参数:

  1. 打开您感兴趣的请求的 Headers 标签。 请参阅查看 HTTP 标头
  2. 转至 Query String Parameters 部分。
Query String Parameters 部分。
图 24. 添加蓝色边框的 Query String Parameters 部分

查看查询字符串参数源

若要查看请求的查询字符串参数源:

  1. 转至 Query String Parameters 部分。 请参阅查看查询字符串参数
  2. 点击 view source

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

若要以用户可读的格式查看保留编码的查询字符串参数:

  1. 转至 Query String Parameters 部分。 请参阅查看查询字符串参数
  2. 点击 view URL encoded

查看 Cookie

若要查看在请求的 HTTP 标头中发送的 Cookie:

  1. 在 Requests 表格的 Name 列下,点击请求的网址。
  2. 点击 Cookies 标签。

查看字段,了解各列的说明。

Cookies 标签。
图 25. 添加蓝色边框的 Cookies 标签

查看请求的时间细分数据

若要查看请求的时间细分数据:

  1. 在 Requests 表格的 Name 列下,点击请求的网址。
  2. 点击 Timing 标签。

如需了解快速访问此数据的方法,请参阅预览时间细分数据

如需了解在 Timing 标签中可能看到的各阶段的更多信息,请参阅时间细分阶段说明

Timing 标签。
图 26. 添加蓝色边框的 Timing 标签

下面是有关每个阶段的更多信息。

如需了解访问此视图的其他方法,请参阅查看时间细分数据

预览时间细分数据

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

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

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

时间细分阶段说明

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

  • Queueing。 浏览器在以下情况下对请求排队:
    • 存在更高优先级的请求。
    • 此源已打开六个 TCP 连接,达到限值。 仅适用于 HTTP/1.0 和 HTTP/1.1。
    • 浏览器正在短暂分配磁盘缓存中的空间
  • Stalled。 请求可能会因 Queueing 中描述的任何原因而停止。
  • DNS Lookup。 浏览器正在解析请求的 IP 地址。
  • Proxy negotiation。 浏览器正在与代理服务器协商请求。
  • Request sent。 正在发送请求。
  • ServiceWorker Preparation。 浏览器正在启动 Service Worker。
  • Request to ServiceWorker。 正在将请求发送到 Service Worker。
  • Waiting (TTFB)。 浏览器正在等待响应的第一个字节。 TTFB 表示 Time To First Byte(至第一字节的时间)。 此时间包括 1 次往返延迟时间及服务器准备响应所用的时间。
  • Content Download。 浏览器正在接收响应。
  • Receiving Push。 浏览器正在通过 HTTP/2 服务器推送接收此响应的数据。
  • Reading Push。 浏览器正在读取之前收到的本地数据。

查看发起者和依赖项

若要查看请求的发起者和依赖项,请按住 Shift 键 并将鼠标指针悬停在 Requests 表格中的请求上。 DevTools 将发起者的颜色设置为绿色,将依赖项设置为红色。

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

当 Requests 表格按时间顺序排序时,鼠标指针悬停位置请求上方的第一个绿色请求是依赖项的发起者。 如果该请求上方还有另一个绿色请求,则更高的请求是发起者的发起者。 依此类推。

查看加载事件

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

Network 面板上 DOMContentLoaded 和 load 事件的位置。
图 29. “Network”面板上 DOMContentLoadedload 事件的位置

查看请求总数

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

自 DevTools 打开后的请求总数
图 30. 自 DevTools 打开后的请求总数

查看总下载大小

Network 面板底部的 Summary 窗格中列出请求的总下载大小。

请求的总下载大小
图 31. 请求的总下载大小

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

查看导致请求的堆栈轨迹

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

导致资源请求的堆栈轨迹
图 32. 导致资源请求的堆栈轨迹

查看未压缩的资源大小

点击 Use Large Request Rows 使用大请求行, {:.inline-icon} 然后查看 Size 列底部的值。

未压缩资源示例。
图 33. 通过网络发送的 jquery-bundle.js 文件的压缩大小是 30.9 KB,而未压缩大小是 86.3 KB

导出请求数据

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

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

  1. 右键点击 Requests 表格中的任意请求。
  2. 选择 Save as HAR with Content。 DevTools 会将自打开 DevTools 后出现的所有请求保存到 HAR 文件中。 无法过滤请求或仅保存单个请求。

获得 HAR 文件后,可以将其导回 DevTools 进行分析。 只需将 HAR 文件拖放到 Requests 表格即可。 另请参阅 HAR Analyzer

选择 Save as HAR with Content。
图 34. 选择 Save as HAR with Content

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

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

  • Copy Link Address。 将请求的网址复制到剪贴板。
  • Copy Response。 将响应正文复制到剪贴板。
  • Copy as cURL。 以 cURL 命令形式复制请求。
  • Copy All as cURL。 以一系列 cURL 命令形式复制所有请求。
  • Copy All as HAR。 以 HAR 数据形式复制所有请求。
选择 Copy Response。
图 35. 选择 Copy Response

更改 Network 面板的布局

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

隐藏 Filters 窗格

默认情况下,DevTools 会显示 Filters 窗格。 点击 Filter 过滤 可以隐藏此窗格。

Hide Filters 按钮
图 36. 添加蓝色边框的 Hide Filters

使用大请求行

想要在网络请求表格中添加更多空格时,可以使用大行。 使用大行时,某些列还会提供更多信息。 例如,Size 列底部的值是未压缩的请求大小。

Requests 窗格的大请求行示例。
图 37. Requests 窗格的大请求行示例

点击 Use large request rows 使用大请求行 {:.devtools-inline} 可以启用大行。

Large Request Rows 按钮
图 38. 添加蓝色边框的 Large Request Rows

隐藏 Overview 窗格

默认情况下,DevTools 会显示 Overview 窗格。 点击 Hide overview 隐藏概览 可以隐藏此窗格。

Hide Overview 按钮
图 39. 添加蓝色边框的 Hide Overview

反馈

Was this page helpful?