• Chrome 内置抓包对象
• Block requests
• 朝长进步长图
• 代码的覆盖率分析
• Make site better
• Chrome 内置抓包对象

【编辑推荐】

1. Vivaldi浏览器主打汗青记录功能，想挑衅Chrome霸权
2. 谷歌Chrome封杀赛门铁低廉甜头废除所有HTTPS凭证
3. 浏览器份额排名：Chrome居首，微软Edge不及IE
4. 誓不两立？Win10 S体系与Chrome浏览器无缘
5. Chromebook若何双启动：Ubuntu 17.04 GNOME和Chrome OS

【义务编辑：未丽燕 TEL：（010）68476606】

在浏览器地址栏输入 chrome://net-internals/#events ，即可打开自带的抓包对象。对象处于live状况，其他tab 页有请求刷新，列表会随之刷新请求的快照，点击快照可查看具体的请求信息，合营 network面板能看到一个完全的请求。

Block requests

network 面板右击请求即可看到 block 选项，这个选项可以或许使我们在要乞降域的级别上打断点。

eg: 合营 Preserve log 可以监测请求在不合域之间转发跳转时状况变更(请求在不合域之间转发跳转，network面板会经常性地损掉 response)。

朝长进步长图

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

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

eg: 合营这个选项可以做一些 module lazyload 的优化。

代码的覆盖率分析

【51CTO晃荡】8.26 带你与清华大年夜学、搜狗、京东大年夜咖们一路商量基于算法的IT运维实践

经由过程coverage 面板可以找到没有效到的 css和 js 代码，点击单个文件可以查看详情，并且也是处于 live 状况，页面产生变更时，覆盖率申报也会随之刷新。经由过程右边菜单 more tools 或者经由过程快捷键 ctrl + shift +p (windows) 输入coverage 即可打开 coverage。

Make site better

Audits panel 供给了 PWA, performance, 无障碍，最佳实践四个维度的网站测试申报。供给了不是很常见的无障碍测试，合营申报我们可以进行更好的无障碍优化。

　　推荐阅读

　　掌握这5个方面，让你具备真正的交互设计思维！

【51CTO晃荡】8.26 带你与清华大年夜学、搜狗、京东大年夜咖们一路商量基于算法的IT运维实践 Z Yuhan(英国约克大年夜学人机交互硕士)：交互思维是什么?网上的搜刮结不雅大年夜多是一些 交>>>详细阅读

本文标题：Chrome调试工具的一些高阶功能

地址：http://www.17bianji.com/lsqh/36872.html

 1/2    1