Chrome DevTools — Network

记录网络请求

默认情况下，只要DevTools在开启状态，DevTools会记录所有的网络请求，当然，记录都是在Network面板展示的。

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

当页面重载或者页面跳转时，默认情况下，Network面板下的网络请求记录表也是刷新的。如果想保留之前页面的网络请求数据，可以勾选Preserve log。
常用的一个应用场景：登录/注册时会调用登录/注册API，开发者想查看这个接口返回的情况，但是登录/注册成功后一般会跳转到新的页面，导致了Network面板的请求记录被刷新从而看不到登录/注册接口返回的情况。此时勾选上Preserve log，无论跳转到那个页面，都能在Network网络请求记录表中查看到之前接口返回的情况。

隐藏data URLs

data URLs指一些嵌入到文档中的小型文件，在请求表里面以data:开头的文件就是，如较为常见的svg文件。勾选Hide data URLs复选框即可隐藏此类文件。

分析请求

查看请求记录

请求表默认显示以下列：

1. Name：文件的名字或者资源的标识符

2. Status：HTTP状态码

3. Type：请求资源的MIME类型

4. Initiator：以下对象或处理可以发起一个请求

5. List item

   Redirect：HTTP重定向
   Script：js函数
   Other：一些别的处理或操作，比如通过链接导航到一个页面，或者是在浏览器的地址栏输入一个地址然后回车

Headers：查看请求头、响应头以及请求参数

默认情况下，请求、响应头是按照字母表顺序显示的http头部的名字，如果想按照实际接收的顺序显示，点击上图中的view source，反之点击上图中的view parsed。
在Headers选项卡中也可查看请求的参数，上图橙色方框部分。也有view source和view parsed，另外还有参数编码格式（view URL encoded）和解码格式（view decoded）。

转发：
https://segmentfault.com/a/1190000008407729