深入浅出：巧用 Chrome DevTools 进行网络请求调试

作者：吴楷鹏，He3 核心研发: https://he3.app/

开发者常常依赖 Chrome DevTools 来分析和优化网络请求。这个工具伴随着开源浏览器内核 Chromium 被包括了 Edge 、Opera 、QQ 浏览器和 360 浏览器等常见浏览器所采纳和提供。在这篇文章中，我们将介绍 Chrome DevTools 中的 网络面板 (Network) 功能，并提供一些有用的技巧来帮助您优化网络请求。

1. 查看资源来源

在资源面板查看文件时，Reveal in Network panel 可以定位资源属于那个请求：

2. 过滤请求

点开后可以根据 Fetch/XHR 、JS 、CSS 等等选项请求过滤请求：

按住 <kbd>Ctrl</kbd> (Mac 用 <kbd>Command</kbd>) 进行点击可以多选，比如同时过滤 JS 和 CSS 类型的文件：

同时提供 Filter 输入框，可以根据输入的名称进行筛选，当然，你也可以写正则表达式，比如用 /(css|js)$/ 来同时筛选出 css 和 js 文件：

前面加个短横 - 还可以取反：

3. 保存所有网页请求

刷新页面所有请求都会重置掉，这对调试接口非常不方便，因为我们经常需要做前后请求对比，打开保存日志（ Preserve Log ）选项，将网页请求记录一直保存下来。

4. 禁止缓存

缓存对用户体验来说非常重要，但对开发来说非常不需要。打开禁止缓存（ Disable Cache ），拒绝所有缓存。

5. 网页加载截图

网络面板提供了网页加载截图， 方便你查看网页一步步的加载过程:

6. 禁止某些请求

在分析网页性能的时候，可以通过禁止某些请求来做控制变量法:

这个方法只能单个单个禁止请求，Chrome 还提供了个根据模板禁止请求，首先 <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd>（ Mac 用 <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> ）运行命令菜单（ Run command ），搜索 Show Network request blocking 并运行它：

比如禁止所有 CDN 文件，可以这样写： https://cdn.heighliner.cloud/*

这里虽然叫做模板（ Pattern ），但是并不能用正则表达式，只能用通配符（*），弱鸡的 Chrome 。

7. 模拟网络情况

大多数情况下，浏览器会发起畅通无阻的网络请求，但某些场景下我们希望它们不畅通且有阻。

节流（ Throttling ）处可以控制网络的快慢，默认提供快速 3G 、慢速 3G 、离线（ Offline ）。

当然你也可以进行自定义，其实无非就是控制下载（ Download ）、上传（ Upload ）和延迟（ Latency ）的值。

8. 查看 Load 事件

网络面板有多个地方展示 DOMContentLoaded 和 load 事件的时间点，蓝线对应 DOMContentLoaded 事件，红线代表 load 事件。

话说 Chrome 这里有个 BUG ，暗黑模式和明亮模式下颜色表现不太一致。

9. 查看请求情况

在分析一个网站性能时候，有几个总数据值得参考。

第一个是网站总的请求数量，这里显示为 33：

第二个是传输的资源大小，这里为 731kB：

第三个是传输过来的资源解压之后的大小，这里为 1.9MB：

打开 Use large request rows ，可以详细看到每个请求解压前后的资源大小。

10. 分享请求

前后端接口联调对线的时候，经常需要查询接口详情，扔一两张截图或许方便但不够详细，HAR（HTTP Archive ）是一种基于 JSON 格式的存档文件，你可以把所有 HTTP 请求下载成 HAR 文件：

扔给对方导入：

11. 清理网络请求

一键重置网络面板所有记录，还你干净如初。

想要了解更多？

欢迎大家关注我们公众号定期推荐有趣的开发者工具，也欢迎大家加入我们微信群一起讨论和交流：