Network——网络面板
查看网络请求，类似于我们测试常用的抓包工具
1、按照请求类型过滤，单击“网络”面板上的XHR，JS，CSS， Img，Media，Font，Doc，WS（WebSocket），Manifest或 Other（此处未列出的任何其他类型）按钮。若想选择多个按住Ctrl不放，点击鼠标左键
2、preserve log，勾选后在刷新浏览器的时候不会清空请求信息，会保留之前的请求
3、disable cache，禁用浏览器缓存来模拟首次访问者
在测试的时候，可以勾选，避免因为缓存而带来的一些问题，报给开发会说你这是因为缓存的原因，won't fix
4、模拟网络状态，online、offline、3G、自定义，在测试弱网或者离线的时候，可以用此选项进行设置
5、设置每条请求记录的显示字段，右键可以选择显示不同的列，也可以进行排序
6、单击某一个请求，查看具体信息，不赘述，可以参考抓包工具的相关内容
- Headers：查看请求头、响应头以及请求参数
- Preview：查看响应体的预览
- Response：查看响应体
- Cookies：查看cookies
- Timing：请求时序
7、请求时序，一个请求的时间，都经过了哪些步骤，哪里比较耗时
- Queueing：浏览器在以下情况下将请求排队：
- 有更高优先级的请求
- 已为该来源打开了六个TCP连接，这是限制。仅适用于HTTP / 1.0和HTTP / 1.1
- 浏览器正在磁盘缓存中短暂分配空间
- Stalled：出于队列中描述的任何原因，该请求都可能被暂停
- DNS Lookup：浏览器正在解析请求的IP地址
- Proxy negotiation：浏览器正在与代理服务器协商请求
- Request sent：正在发送请求
- ServiceWorker Preparation：浏览器正在启动服务工作者
- Request to ServiceWorker：该请求被发送到服务人员
- Waiting (TTFB)：浏览器正在等待响应的第一个字节。TTFB代表到第一个字节的时间。此时间包括一次往返延迟和服务器准备响应所花费的时间
- Content Download：浏览器正在接收响应
- Receiving Push：浏览器正在通过HTTP / 2服务器推送接收此响应的数据
- Reading Push：浏览器正在读取先前接收的本地数据
8、查看请求的发起对象和依赖对象
按住Shift键，然后鼠标悬浮在某个请求上，该请求的发起对象由绿色标志，该请求的依赖对象由红色标志
9、设置
10、概述，此数字仅跟踪自打开DevTools以来已记录的请求。如果在打开DevTools之前发生了其他请求，则不计算这些请求
分别为请求总数、请求的总下载大小、资源的未压缩大小、总时间、DOMContentLoaded和load事件的计时
11、禁用请求，想看看当某些脚本、样式文件缺少或者其他资源加载失败时的表现，选择某条请求后右击选择 Block Request URL，一个新的 禁用请求 面板会在下面显示，在这里可以管理被禁用的请求。
快捷链接：
Chrome开发者工具——Elements
Chrome开发者工具——Console
参考资料：
https://developers.google.com/web/tools/chrome-devtools?hl=zh-cn
