chrome devtools 基础技巧

一、通用

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 新建可服用的代码。

执行

1. 在 Snippets 菜单右键运行；
2. 在 Snippets 菜单使用快捷键 ⌘ + Enter;
3. 打开 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 开发者工具