Chrome 开发者工具 F12 是前端开发、测试人员的利器，使用开发者工具可以非常方便地查看页面元素、源文件、控制台、网络等等。
其中的 Network 类似与 fiddler 抓包工具，能够获取请求、响应、缓存等等内容。
接下来介绍下 Network，来吧。
界面介绍1，界面总览 
2，记录请求
开启按钮时记录所有请求，关闭按钮时不会记录 
3，清除请求
清除按钮，清除所有记录的请求
4，过滤请求
过滤器，能够自定义筛选条件，也可以选择预定义的过滤方式
- 自定义条件
- 预定义的过滤
ALL：显示所有请求 XHR：显示AJAX异步请求 JS：显示js文件 CSS：显示css文件 Img：显示图片 Media：显示媒体文件，音频、视频等 Font：显示Web字体 Doc：显示html WS：显示websocket请求 Other：显示其他请求
5，保留请求记录
勾选之后，刷新页面不会清空之前的请求记录，下面是连续刷新两次页面结果 
当打开开发者工具时生效，打开这个开关，则页面资源不会存入缓存，可以从 Status 栏的状态码看文件请求状态。
7，弱网设置设置模拟限速，如下图所示。 
8，网络设置
caching：缓存设置
Network throttling ：弱网设置
User agent：属于 http 请求头一部分。表示所用浏览器类型及版本、操作系统及版本、浏览器内核、等信息的标识。
Accepted Content-Encodings：服务端压缩格式 
9，右键界面 
Open in new tab：在新的标签中打开链接
Clear browser cache：清空浏览器缓存
Clear browser cookies：清空浏览器cookies
Copy：复制
Block request URL：拦截当前请求url
Block request domian：拦截当前域名下所有请求
Replay XHR：重新请求AJAX
Sort By：排序请求
Header Options：显示请求头选项
Save all as HAR with content：保存所有请求为.har文件
10，copy
Copy Link Address：复制资源url到系统剪贴板
Copy Response：复制HTTP响应
Copy stack trace：复制堆栈信息
Copy as PowerShell：复制请求PwoerShell代码
Copy as fetch：复制请求fetch代码
Copy as Node.js fetch：复制请求Node.js fetch代码
Copy as cUrl（cmd）：复制请求cUrl 命令代码
Copy as cUrl（bash）：复制请求cUrl 命令代码
Copy all as PowerShell：复制所有请求PwoerShell代码
Copy all as fetch：复制所有请求fetch代码
Copy all as Node.js fetch：复制所有请求Node.js fetch代码
Copy all as cUrl（cmd）：复制所有请求cUrl 命令代码
Copy all as cUrl（bash）：复制所有请求cUrl 命令代码
Copy All as HAR：复制所有请求HAR文件
最后，下面是我整理出来的一份软件测试工程师发展方向知识架构体系图。 
希望大家能在这个成长过程中收益良多。可以说，这个过程会让你痛不欲生，但只要你熬过去了。以后的生活就轻松很多。正所谓万事开头难，只要迈出了第一步，你就已经成功了一半，古人说的好“不积跬步，无以至千里。”等到完成之后再回顾这一段路程的时候，你肯定会感慨良多。
由于CSDN上传图片大小有限，有需要的朋友可以关注我的公众号：程序员二黑，回复1，即可获取原图。
下面是一份配套的软件测试资源包： 
上面是一些配套资源，对于软件测试的的朋友来说应该是最全面最完整的备战仓库，为了更好地整理每个模块，我也参考了很多网上的优质博文和项目，力求不漏掉每一个知识点，很多朋友靠着这些内容进行复习，拿到了BATJ等大厂的offer，这个仓库也已经帮助了很多的软件测试的学习者，希望也能帮助到你。
关注我的微信公众号：程序员二黑，即可免费获取！
最困难的时候，也就是我们离成功不远的时候！如果你不想再体验一次自学时找不到资料，没人解答问题，坚持几天便放弃的感受的话，可以加入我们的群：785128166 大家一起讨论交流学习。
推荐阅读高薪程序员也躲不过35岁这一关…当能力与年龄脱节，我们该如何自救？
清华学姐熬了一个月肝出这份32W字Linux知识手册，在 Github标星31K+
字节跳动软件测试岗，前两面过了，第三面HR天坑！竟然跟我说……
