Chrome开发者工具——Network

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

作者：一个不知名但有态度的小测试
链接：https://www.jianshu.com/p/b3c2582d5d7a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。