Chrome 调试工具的一些高阶功能

Chrome 调试工具的一些高阶功能

by.苏 迪 2017-8-21

• Chrome 内置抓包工具
• Block requests
• 截取长图
• 代码的覆盖率分析
• Make site better

Chrome 内置抓包工具

在浏览器地址栏输入chrome://net-internals/#events，便可打开自带的抓包工具。工具处于live状态，其余tab 页有请求刷新，列表会随之刷新请求的快照，点击快照可查看详细的请求信息，配合 network面板能看到一个完整的请求。

Block requests

network 面板右击请求便可看到 block 选项，这个选项可以使咱们在请求和域的级别上打断点。

eg: 配合 Preserve log 能够监测请求在不一样域之间转发跳转时状态变化(请求在不一样域之间转发跳转，network面板会常常性地丢失 response)。

 

截取长图

切换 device 到其余模式(好比调试移动端)时，右边菜单栏提供了 capture full-page screenshots的选项。

eg: 配合这个选项能够作一些 module lazyload 的优化。

 

代码的覆盖率分析

经过coverage 面板能够找到没有用到的 css和 js 代码，点击单个文件能够查看详情，而且也是处于 live 状态，页面发生变化时，覆盖率报告也会随之刷新。经过右边菜单 more tools 或者经过快捷键 ctrl + shift +p (windows) 输入coverage 便可打开 coverage。

Make site better

Audits panel 提供了 PWA, performance, 无障碍，最佳实践四个维度的网站测试报告。提供了不是很常见的无障碍测试，配合报告咱们能够进行更好的无障碍优化。

在每次发布版本时，Chrome Devtools Updates 会提示更新的内容。固然，最简单的方法就是保持chrome的版本更新，更新后 devtool 面板会自动推送 features && changes。

参考资料

• Chrome Devtools
• Chrome Devtools Updates
• chrome://net-internals