网络请求追踪和分析

何时使用“网络”面板

通常，当您需要确保资源按预期下载或上传时，请使用“网络”面板。“网络”面板最常见的用例是：

• 确保资源实际上正在上传或下载。

• 检查单个资源的属性，如其 HTTP 标头、内容、大小等。

如果您正在寻找提高页面加载性能的方法，请不要从“网络”面板开始。有许多类型的负载性能问题与网络活动无关。从"审核"面板开始，因为它为您提供了有关如何改进页面的针对性建议。请参阅优化网站速度。

打开“网络”面板

按F12打开开发者工具后，然后选择Network选项卡。我们仍旧拿Github来举例：

Network选项卡里面有几个主要的区域， 从上往下依次是：

控制条

我们用红色的框圈起来的是控制条，上面有这些控件：

• 红色圈圈：红色是表示录制请求中，灰色表示禁用请求录制；
• 禁止图标：表示清除记录的内容；
• 漏斗图标：表示过滤下面网络请求的显示；
• 放大镜图标：表示从下面的网络请求中搜索；
• Preserve log：如果勾选了，表示即使页面刷新、跳转了，当前页面的网络请求仍然会保留，不会被清理掉，默认是没有勾选的。这个功能在分析登录跳转之类的场景的时候非常有用；
• Disable cache：如果勾选了，表示每次页面刷新都不会利用本地的缓存，而是重新从服务器去拿新的数据；
• 上传、下载两个图标：上传、下载HAR文件；
• 最后一个花型图标：可以提供更多的功能，比如把请求按渲染帧分组、加载的时候截屏等大多数人不是经常用的功能。

过滤条

绿色框圈起来部分。在这里，可以搜索、或者按网络请求的类型来过滤。

时间轴

紫色框圈起来部分。在这里主要展示主要请求所占用的时间，及顺序。

请求列表

棕色框圈起来的部分。这是我们主要关注的区域，里面显示了每个请求的名称、状态码、内容类型、发起者、大小（如果用了缓存，就显示缓存，而不是真正大小）、请求时间等。

可以看出显示是个表格，表格的每列的表头是可以点击排序的。每个请求点开后，还可以看着每个请求具体的信息内容：

这个也是我们经常关注的内容，可以看到每个请求的请求、响应的头部信息及数据内容，还可以看到cookie、时间花费等分析。

使用这个工具，需要理解HTTP协议的内容、机制，以及一些常见的术语的含义。如果你刚开始觉得困难，不要着急，慢慢来一步步地理解，每个人都是这么走过来的。