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

　　开发者常常依赖 Chrome DevTools 来分析和优化网络请求。这个工具伴随着开源浏览器内核 Chromium 被包括了 Edge、Opera、QQ 浏览器和 360 浏览器等常见浏览器所采纳和提供。在这篇文章中，我们将介绍 Chrome DevTools 中的 网络面板 (Network) 功能，并提供一些有用的技巧来帮助您优化网络请求。 1. 查看资源来源
　　在资源面板查看文件时， Reveal in Network panel  可以定位资源属于那个请求：
　　2. 过滤请求
　　点开后可以根据 Fetch/XHR、JS、CSS 等等选项请求过滤请求：
　　按住 Ctrl (Mac 用 Command) 进行点击可以 多选 ，比如同时过滤 JS 和 CSS 类型的文件：
　　同时提供 Filter 输入框，可以根据输入的名称进行筛选，当然，你也可以写正则表达式，比如用  /(css|js)$/  来同时筛选出 css 和 js 文件：
　　前面加个短横  -  还可以取反：
　　3. 保存所有网页请求
　　刷新页面所有请求都会重置掉，这对调试接口非常不方便，因为我们经常需要做前后请求对比，打开保存日志（Preserve Log）选项，将网页请求记录 一直保存 下来。
　　4. 禁止缓存
　　缓存对用户体验来说非常重要，但对开发来说非常不需要。打开 禁止缓存 （Disable Cache），拒绝所有缓存。
　　5. 网页加载截图
　　网络面板提供了 网页加载截图 ， 方便你查看网页一步步的加载过程:
　　6. 禁止某些请求
　　在分析网页性能的时候，可以通过禁止某些请求来做控制变量法:
　　这个方法只能单个单个禁止请求，Chrome 还提供了个根据模板禁止请求，首先 Ctrl + Shift + P（Mac 用 Command + Shift + P ）运行命令菜单（Run command），搜索  Show Network request blocking  并运行它：
　　比如禁止所有 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 ：
　　打开  Use large request rows  ，可以详细看到每个请求解压前后的资源大小。
　　在这里插入图片描述 10. 分享请求
　　前后端接口联调对线的时候，经常需要查询接口详情，扔一两张截图或许方便但不够详细，HAR（ H TTP Ar chive）是一种基于 JSON 格式的存档文件，你可以把所有 HTTP 请求下载成 HAR 文件：
　　扔给对方导入：
　　11. 清理网络请求
　　一键 重置 网络面板所有记录，还你干净如初。
　　想要了解更多？
　　欢迎大家关注我们公众号定期推荐有趣的开发者工具，也欢迎大家加入我们微信群一起讨论和交流：