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

  1. 查看资源来源

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

  2. 过滤请求

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

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

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

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

  3. 保存所有网页请求

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

  4. 禁止缓存

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

  5. 网页加载截图

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

  6. 禁止某些请求

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

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

  比如禁止所有 CDN 文件，可以这样写： *

  在这里插入图片描述

  这里虽然叫做模板（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 rowsjs刷新页面，可以详细看到每个请求解压前后的资源大小。

  在这里插入图片描述