Chrome内置抓包工具拦截请求拦截长图代码覆盖分析让网站更好Chrome内置抓包工具在浏览器地址输入chrome://net-internals/#events栏,可以打开内置的抓包工具。工具处于直播状态,其他标签页有刷新请求,列表会相应刷新请求的快照。点击快照可以查看详细的请求信息,配合网络面板可以看到一个完整的请求。在Blockrequestsnetwork面板中右击请求可以看到block选项,这样我们就可以在请求和域级别进行断点。eg:通过Preservelog,可以监控请求在不同域间转发跳转时的状态变化(请求在不同域间转发跳转,网络面板会经常丢失响应)。当截取长图并将设备切换到其他模式(如调试移动端)时,右侧菜单栏提供截取整页截图的选项。eg:通过这个选项,可以做一些模块lazyload优化。代码覆盖率分析通过覆盖率面板,可以找到未使用的css和js代码。点击单个文件查看详情,也是直播状态。当页面发生变化时,覆盖率报告也会随之刷新。您可以通过在右侧菜单中输入更多工具或通过快捷键ctrl+shift+p(windows)进入coverage来打开coverage。MakesitebetterAudits面板提供四个维度的网站测试报告:PWA、性能、可访问性和最佳实践。提供不太常用的无障碍测试,我们可以配合报表进行更好的无障碍优化。对于每个版本,ChromeDevtoolsUpdates都会提示更新。当然,最简单的方法就是保持chrome的版本更新。更新后,devtool面板将自动推送功能和更改。
