使用 Chrome DevTools 检查网络活动

这是一篇实操教程，介绍 Chrome 开发者工具中最常用的网页网络活动检查功能。如果想按功能查阅说明，可参阅 Network 面板参考。原文页面也提供本教程的视频版本。

什么时候使用 Network 面板

需要确认资源是否按预期下载或上传时，使用 Network（网络） 面板。常见用途包括确认资源确实发生了传输，以及检查单个资源的 HTTP 标头、内容、大小等属性。

如果目的是提升页面加载性能，应先使用 Lighthouse 面板。许多加载性能问题与网络活动无关，Lighthouse 会给出有针对性的改进建议。详见 优化网站速度。

打开 Network 面板

打开 配套演示页面，边阅读边尝试。可以将演示和教程放在两个独立窗口中。

1. 按 Control+Shift+J，macOS 上按 Command+Option+J，打开 DevTools。最先出现的是 Console 面板。
2. 如果方便操作，可以将 DevTools 停靠在窗口底部。
3. 点击 Network 标签页。

此时面板可能是空的，因为 DevTools 只有在打开期间才记录网络活动，而打开后还没有发生新的请求。

记录网络活动

重新加载演示页面。Network 面板会把页面产生的全部网络活动记录到 Network Log（网络日志） 中。

每一行代表一个资源，默认按时间顺序排列。顶部通常是主 HTML 文档，底部是最后请求的资源。默认列如下：

网络日志上方的图表叫 Overview（概览）。本教程不使用它，可以按需隐藏，操作入口见 网络面板参考。

只要 DevTools 保持打开，就会继续记录活动。先查看日志底部并记下最后一项，再点击演示中的 Get Data。日志底部会增加 getstarted.json，因为该按钮触发了对此文件的请求。

显示更多信息

网络日志的列可以配置：不需要的列可以隐藏，默认隐藏的列也可以显示。

右键点击表头，选择 Domain，就会增加每个资源的域名。将鼠标悬停在 Name 列的单元格上，还能查看资源的完整 URL。

模拟较慢的网络

开发计算机的网络通常比用户移动设备的网络快。使用网络限速，可以更好地理解移动设备上的加载时间。

1. 点击 Throttling 下拉菜单，默认值为 No throttling。
2. 选择 3G。
3. 长按浏览器的重新加载按钮，选择 Empty Cache And Hard Reload。

再次访问页面时，浏览器通常会从缓存取得部分文件，以加快加载。清空缓存并强制重新加载会要求通过网络重新获取所有资源，有助于观察首次访问者的体验。

Empty Cache And Hard Reload 仅在 DevTools 打开时可用。

捕捉加载过程的截图

截图可记录页面在加载过程中不同时刻的外观，并与这些时段加载的资源对应。

1. 点击 Network Settings 的设置图标。
2. 勾选 Screenshots。
3. 再次使用 Empty Cache And Hard Reload 加载页面。Screenshots 区域会显示各时刻的页面缩略图。
4. 点击第一张缩略图，DevTools 会显示当时发生的网络活动。
5. 取消 Screenshots 勾选，关闭截图区域。
6. 再次加载页面。

检查单个资源的详情

点击日志中的资源，便能查看详细信息。以演示里的 getstarted.html 为例：

1. 点击 getstarted.html，打开 Headers，检查 HTTP 标头。
2. 点击 Preview，查看 HTML 的基本渲染结果。如果 API 以 HTML 返回错误信息，渲染后的内容可能比源代码更容易阅读；检查图片时也适用。
3. 点击 Response，查看 HTML 源代码。如果文件经过压缩，可以点击该标签页底部的格式化按钮，重新排版以便阅读。
4. 点击 Initiator，查看请求发起者链的树状关系。
5. 点击 Timing，查看该资源网络活动的时间分解。
6. 点击关闭按钮，回到网络日志。

搜索网络标头和响应

需要在全部资源的 HTTP 标头和响应中查找字符串或正则表达式时，使用 Search 标签页。

例如，想检查资源是否采用合理的缓存策略：

1. 点击面板操作栏中的搜索图标，或在 macOS 上按 Command+F，Windows/Linux 上按 Control+F。
2. Search 区域在网络日志左侧打开。
3. 输入 Cache-Control，按 Enter。结果会列出标头或内容中出现该文本的位置。
4. 点击结果。如果匹配发生在标头中，打开 Headers；如果发生在响应内容中，打开 Response。
5. 关闭 Search 和 Headers。

过滤资源

DevTools 支持多种方式，隐藏与当前任务无关的资源。Filters 工具栏默认应显示；若没有显示，点击过滤图标。

按字符串、正则表达式或属性过滤

在 Filter 输入框中依次尝试：

• png：只保留文本中包含 png 的资源。本演示中匹配的是 PNG 图片。
• /.*\.[cj]s+$/：使用正则表达式匹配以点号、c 或 j、一个或多个 s 结尾的名称，例如 CSS、JS 文件。
• -main.css：排除匹配 main.css 的资源，其他匹配该模式的文件也会被排除。
• domain:raw.githubusercontent.com：只保留 URL 域名符合此条件的资源。

更多可用属性见 按属性过滤请求。完成后，清空 Filter 输入框。

按资源类型过滤

点击 CSS，隐藏其他类型的资源。如果还想同时查看脚本，按住 Control，macOS 上按住 Command，再点击 JS。点击 All，移除类型过滤，重新查看全部资源。

其他过滤方法见 过滤请求。

屏蔽请求

某些资源不可用时，页面会完全失效，还是仍有部分功能？可以通过屏蔽请求观察：

1. 按 Control+Shift+P，macOS 上按 Command+Shift+P，打开 Command Menu。
2. 输入 block，选择 Show Request Blocking，按 Enter。
3. 点击 Add Pattern。
4. 输入 main.css。
5. 点击 Add。
6. 重新加载页面。主样式表被屏蔽后，页面样式会变乱。网络日志里的 main.css 行显示为红色，表示资源被屏蔽。
7. 取消 Enable request blocking 勾选。

更多检查网络活动的功能见 Network 面板参考。

来源与许可

作者：Kayce Basques。原文：Inspect network activity，对照 官方简体中文版本。页面最后更新时间为 2024-10-14 UTC，核对日期 2026-10-03。本稿完整整理全部操作章节，调整中文表达和表格，保留界面英文名称、示例字符串与快捷键。

原文包含真实 DevTools 截图和视频，均可从原文查看；本稿未伪造这些技术截图。当前离线包只有独立绘制的概念封面，发布前仍需补齐原图的下载、许可记录和插图位置。本文操作未在当前机器实测。

页面声明：除另有说明外，正文采用 Creative Commons Attribution 4.0，代码示例采用 Apache License 2.0。详见 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。