深入浅出巧用ChromeDevTools进行网络请求调试

　　开发者常常依赖ChromeDevTools来分析和优化网络请求。这个工具伴随着开源浏览器内核Chromium被包括了Edge、Opera、QQ浏览器和360浏览器等常见浏览器所采纳和提供。在这篇文章中，我们将介绍ChromeDevTools中的网络面板（Network）功能，并提供一些有用的技巧来帮助您优化网络请求。1。查看资源来源
　　在资源面板查看文件时，RevealinNetworkpanel可以定位资源属于那个请求：
　　2。过滤请求
　　点开后可以根据FetchXHR、JS、CSS等等选项请求过滤请求：
　　按住Ctrl（Mac用Command）进行点击可以多选，比如同时过滤JS和CSS类型的文件：
　　同时提供Filter输入框，可以根据输入的名称进行筛选，当然，你也可以写正则表达式，比如用（cssjs）来同时筛选出css和js文件：
　　前面加个短横还可以取反：
　　3。保存所有网页请求
　　刷新页面所有请求都会重置掉，这对调试接口非常不方便，因为我们经常需要做前后请求对比，打开保存日志（PreserveLog）选项，将网页请求记录一直保存下来。
　　4。禁止缓存
　　缓存对用户体验来说非常重要，但对开发来说非常不需要。打开禁止缓存（DisableCache），拒绝所有缓存。
　　5。网页加载截图
　　网络面板提供了网页加载截图，方便你查看网页一步步的加载过程：
　　6。禁止某些请求
　　在分析网页性能的时候，可以通过禁止某些请求来做控制变量法：
　　这个方法只能单个单个禁止请求，Chrome还提供了个根据模板禁止请求，首先CtrlShiftP（Mac用CommandShiftP）运行命令菜单（Runcommand），搜索ShowNetworkrequestblocking并运行它：
　　比如禁止所有CDN文件，可以这样写：https：cdn。heighliner。cloud
　　在这里插入图片描述
　　这里虽然叫做模板（Pattern），但是并不能用正则表达式，只能用通配符（），弱鸡的Chrome。7。模拟网络情况
　　大多数情况下，浏览器会发起畅通无阻的网络请求，但某些场景下我们希望它们不畅通且有阻。
　　节流（Throttling）处可以控制网络的快慢，默认提供快速3G、慢速3G、离线（Offline）。
　　当然你也可以进行自定义，其实无非就是控制下载（Download）、上传（Upload）和延迟（Latency）的值。
　　8。查看Load事件
　　网络面板有多个地方展示DOMContentLoaded和load事件的时间点，蓝线对应DOMContentLoaded事件，红线代表load事件。
　　话说Chrome这里有个BUG，暗黑模式和明亮模式下颜色表现不太一致。
　　在这里插入图片描述9。查看请求情况
　　在分析一个网站性能时候，有几个总数据值得参考。
　　第一个是网站总的请求数量，这里显示为33：
　　第二个是传输的资源大小，这里为731kB：
　　第三个是传输过来的资源解压之后的大小，这里为1。9MB：
　　打开Uselargerequestrows，可以详细看到每个请求解压前后的资源大小。
　　在这里插入图片描述10。分享请求
　　前后端接口联调对线的时候，经常需要查询接口详情，扔一两张截图或许方便但不够详细，HAR（HTTPArchive）是一种基于JSON格式的存档文件，你可以把所有HTTP请求下载成HAR文件：
　　扔给对方导入：
　　11。清理网络请求
　　一键重置网络面板所有记录，还你干净如初。
　　想要了解更多？
　　欢迎大家关注我们公众号定期推荐有趣的开发者工具，也欢迎大家加入我们微信群一起讨论和交流：