一、通用
1. DevTools 面板快捷键
| 快捷键(mac) | 作用 |
|---|---|
| ⌘ + shift + D | 切换纵横布局 |
| ⌘ + [ / ⌘ + ] | 切换左/右面板 |
| ⌘ + 1-9 | 转到编号1-9的面板（需要打开Preferences-Appearance-Enable Ctrl + 1-9 ...) |
| ⌘ + shift + C | 选择元素 |
| ⌘ + option + I | 开发者工具 |
| ⌘ + P | Command Menu |
2. Stack trace（保存堆栈信息）
在团队协作中，将堆栈跟踪的信息保存为一个文件传输可以降低沟通成本。操作：在堆栈信息右键-Save as...
3. copy
全局方法 copy() 能拿到能在控制台打印的任何资源。
4. 递增/递减
在调整样式时，使用一下快捷键可实现数值的递增递减。
image.png
5. 使用 Command
类似 Visual Studio Code ，Chrome DevTools 也是使用了⌘ + Shift+ P来打开命令面板。
实例：
- 执行
Capture node screenshot进行节点截图; - 执行
Capture full size screenshot进行滚动截图; - 执行
Switch to dark theme切换黑暗主题；
6. 代码块
新建
打开 Sources - Snippets，点击 New snippet 新建可服用的代码。
执行
- 在
Snippets菜单右键运行； - 在
Snippets菜单使用快捷键⌘ + Enter; - 打开
Command Menu ``（⌘ + P），输入! + [代码块命名]运行；
二、console
1. $符
| 变量 | 引用 |
|---|---|
| $ | document.querySelector |
| $$ | 执行 document.QuerySelectorAll 并返回节点数组而非 Node list
|
| $_ | 上次结果的引用 |
| $0 | 当前 html 节点 |
| $[1-4] | 上[1-4]选择节点的引用 |
| $i | 插件 Console Importer 变量，可在 console 引入npm包 |
2. 打印对象的 “BUG”
console 中打印出的对象，在你打印出他内容之前，是以引用的方式保存的。
3. async
console 默认就被 async 包裹，所以可以直接使用 await。
4. Conditional breakpoints 条件断点
右击行号，选择 Add conditional breakpoint...，输入条件。如果条件成立，断点就会暂停代码的执行。
5. console 方法
| 方法 | 说明 |
|---|---|
| console.assert | 断言，第一个参数为假时，打印后面的参数 |
| console.table | 以表格形式输出 |
| console.dir | 打印节点所关联到的真实的js对象 |
| console.time | 开启一个计时器 |
| console.timeEnd | 结束计时并且将结果在 console 中打印出来 |
6. 给 console.log 加上样式
如果你给打印文本加上 %c 那么 console.log 的第二个参数就变成了CSS 规则！
console.log('%ctest','font-size:30px;color: red;') // test
7. 实时表达式
点击 console 面板“眼睛”按钮，添加实时更新的表达式。
三、Network
1. Request initiator 显示调用堆栈信息
在 Network 面板上打开 initiator 列，请求发出后，将显示完整的调用堆栈和文件。
2. 过滤请求
打开 network 面板沙漏图标，在 Filter 输入框输入过滤规则可实现请求列表过滤。支持以下规则：
- 文本：png
- 正则：/.*.[cj]s+$/
- 排除：-main.css
- 域名：domain:raw.githubusercontent.com
3. 自定义请求表
在请求列表表头右键可配置请求表。
4. 重新发送 XHR
在 XHR 请求右键 - Replay XHR 可重新发送请求。
5. 复制请求
在请求右键 - copy 可复制请求为指定格式。
四、Element
1. h 隐藏元素
选中元素，按 h 可隐藏元素。
2. 展开所有子节点
在元素右击菜单中选择 expand recursively，或者按住 option 按键点击元素。
3. 样式面板中的编辑器
- 插入样式规则的按钮
- Shadow editor 阴影编辑器
- Timing function editor 定时函数编辑器
- 颜色选择器
五、Drawer
Drawer 是一组平行的选项卡，被隐藏在主窗口之下。
1. 打开 Drawer - 按 esc
2. Sensors （传感器）
可模拟传感器。
3. Changes
查看在开发者工具中的修改内容，类似于 diff。
4. Performance monitor
性能面板，可查看 CPU 使用量，node 数量等。
5. ...
以上内容从掘金小册《你不知道的 Chrome 调试技巧 - dendoink》整理得出，需要了解更多细节可自行购买学习。
参考：Chrome 开发者工具
网友评论