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

执行

在 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 开发者工具

chrome devtools 基础技巧