Chrome开发调试之Network

记录网络请求

默认情况下，只要 DevTools 在开启状态，DevTools 会记录所有的网络请求。

停止记录网络请求

• 点击 Stop recording network log 红色图标，当它变为灰色时，表示 DevTools 不再记录请求
• 在 Network 面板下，Command + E (Mac) 或者 Ctrl + E (Windows,Linux)

清除网络请求

跨页面加载时，保留网络请求记录

当页面重载或者页面跳转时，默认情况下，Network 面板下的网络请求记录表也是刷新的。如果想保留之前页面的网络请求数据，可以勾选 Preserve log。

页面加载时捕获屏幕截图

捕获屏幕截图可以分析在页面加载的过程中，用户在不同的时间段内看到的网页是什么样子的。 点击 Capture screenshots 图标开启捕获功能，当图标变为蓝色表示已开启，重载页面即可看到不同时间的屏幕截图。

捕获屏幕截图之后，可以进行以下操作：

• 鼠标悬浮在一张图片上时，该图片四周会出现一个黄色的边框，同时，在 Overview 和 Waterfall 窗口里面也分别有一条黄色的竖线，这条黄色的竖线表示这张图片的捕获时间
• 点击某一张图片，可以过滤掉在这张图片捕获之后发生的所有请求
• 双击图片，可以放大该图片

改变页面加载时的条件

禁用浏览器缓存

在http请求的过程中，有些资源在页面初次加载之后会被缓存到浏览器中，也就是那些状态码为304的资源。为了尽可能准确地模拟用户第一次加载我们网页时的情景，需要禁用浏览器缓存，这样，每一个请求都是从服务端传送过来的，较为准确地反应出网页初次加载的实际情况。

模拟网速条件

在 Network Throttling 下拉框中可以选择不同的网络条件进行模拟，如 2G、3G、4G、WiFi等。

除了选中已有的网络选项，也可以自定义网速相关条件：打开 Network Throttling 菜单，选择 Custom > Add。

另一种模拟情况较为特殊，就是无网络。利用 service workers，PWA(Progressive Web Apps) 在无网络的情况下依然可以使用。模拟这种无网络环境，直接勾选 Offline 即可。

提示：有时候会看到 Network 左侧有个警告图标，这个图标就是提示开发者当前处于模拟网络条件下