开发者如数家珍的工具中，Chrome 想必是众多人心目中的白月光，倒也不是它有多么优秀，而是多亏同行浏览器们的衬托。其开源的内核 Chromium 也成就众多养家糊口的岗位，比如 Edge、Opera、QQ 浏览器、360 浏览器等等国内外一票浏览器。

Chrome 在 DevTools 中提供了诸多奇技淫巧，巧用 Chrome 系列文章将会列举直呼 “Awasome” 的技巧，让你更好地调戏 Chrome。

网络构建了互联网虚伪的繁荣，一句“断网了”就能让大多数人抓狂。网络对愚蠢的人类至关重要，它提供了信息、情绪、身份还有意义。成也网络败也网络，前后端联调时更是如此，本篇将会介绍 DevTools 网络面板（Network）相关功能。

1. 清理网络请求

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

2. 过滤请求

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

按住 Ctrl 或者 Command 进行点击可以多选，比如同时过滤 JS 和 CSS 类型的文件：

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

加个短横 - 可以取反：

3. 保存所有网页请求

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

4. 禁止缓存

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

5. 网页加载截图

查看请求，你可能常用的 waterfall 图表，但网络面板其实还提供了网页加载截图，让你可视化形式查看。

6. 禁止某些请求

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

这个方法只能单个单个禁止请求，Chrome 还提供了个根据模板禁止请求，首先Ctrl + Shift + P（Mac 用 Command + ⇧ + P ）或者

运行命令菜单（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. 查看资源来源

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

后记

网络的重要性不言而喻，Chrome 也给予了相当的重视，DevTools 网络面板上的功能足够方便易用，这篇文章仅涉猎常用、实用的功能技巧，抛砖引玉，如果读者想了解网络面板功能，请移步 Chrome 的 DevTools 官网。

了解再多技巧而无用武之地的话，终究是屠龙之术华而不实，这些功能说到底只能是辅助，真正应该掌握的，还是抽丝剥茧的逻辑分析思维、按图索骥的网络排查思路还有破釜沉舟的问到底精神。