听说掌握 chrome 这些调试技巧，至少可以提高 30%开发效率...

背景

作为前端开发，chrome 可以说是我们使用最多的工具，而 chrome 中使用最多的就是 devTools。其实 devTools 中隐藏着很多提高开发、调试效率的小技巧。工欲善其事，必先利其器，今天我们就分别了解下这些 chrome 的小技巧，开发效率 up up up！

正文

Elements 面板

我们平时展现给用户的页面结构和样式主要是通过 Elements 面板操作，接下来我们就来了解一些和 Elements 相关的使用技巧。

隐藏 dom 元素 ：点击选中当前 dom 节点，按键盘的 h 键，即可隐藏/显示当前选中元素。对于在一些调试场景想快速隐藏某些元素时就会很方便。

隐藏dom节点

展开节点所有子节点：option + 点击当前节点左箭头，即可展开当前节点以下的所有 dom 节点，大大节省了我们寻找 dom 时一个一个点开的时间。

展开节点所有子节点

复制当前 dom 节点：选中当前节点后，右键复制或直接 cmd + c 或 ctrl+c，尤其使用键盘快捷键复制，可以快速复制当前 dom 节点。

复制当前dom节点

Console 面板

Console 控制台可以说是我们前端同学使用最多的工具了，调试、自测都经常用到它。接下来我们就来了解下 Console 面板相关的一些技巧。

copy() ：Console 控制台中使用 copy 函数可以直接对其参数进行复制。

但是注意，这里的 copy 是不会复制函数的。

copy

保存报错信息：对控制台中的报错信息右键选择 save as 保存。

保存报错信息

console 中的异步 ：console 控制台中是默认被 async 包裹的，可以直接使用 await 获取异步结果。

如：console.table(await navigator.storage.estimate());

console 中的$ ：

$('.节点类名')：相当于 document.querySelector('.节点类名')。
$$('.节点类名')：相当于 document.querySelectorAll('.节点类名')。

![console中的 $节点类名](https://wos3.58cdn.com.cn/MnrjIhGfEMSp/video/daojia-$ -202212291606.gif)

$0：当前选中的 dom 节点，$1 为上次选中的 dom 节点，$2 为上上次选中的 dom 节点，直到 $4。

![console中的 $0](https://wos3.58cdn.com.cn/MnrjIhGfEMSp/video/daojia-$ 0-202212291630.gif)

$_：通过使用 $_ 可以直接使用控制台中上次执行的结果。

console中的

$i：需要安装 chrome 插件 Console Importer, 安装后就可以直接在控制台使用已安装的 npm 插件。如下：

 // 先安装 
 $i('moment') 
 // 安装成功后，就可以在控制台直接使用该插件 
 moment()

Console Importer

monitor：monitor 可以监听任何你传入的方法，当方法被执行时，会在 console 控制台打印出来，包括调用的函数名，以及给相应函数传递的参数。如果想取消监听，则可以使用 unmonitor。

class Vehicle {
  constructor(name, color) {
    this.name = name;
    this.color = color;
  }
  getName(){
    return `我是 ${this.name}。`
  }
  getInfo() {
    return `我是 ${this.color}颜色的 ${this.name}`;
  }
  getOther() {
    return `我是 ${this.color}颜色的 ${this.getName()}`;
  }
}

monitor

monitorEvents：monitorEvents 可以对 dom 的事件进行监听，当被监听的 dom 的某个事件方法执行时，就会自动在控制台中打印该事件。如果想指定监听的事件类型，可以通过 monitorEvents 的第二个参数传入事件类型即可。如果想取消监听事件则可以使用 unmonitorEvents。

monitorEvents

console 日志打印：
1. console.table：table 可以对对象或数据以表格的形式打印出来，也可以使用简写 table()。
```
let info = {
name: 'Tom',
age: 13,
gender: 'boy',
hobby: 'football',
}
const {name, age, gender, hobby} = info;

    console.table({name, age});
    table(info);
    ```
```
2. console.dir: 有时你想要打印一个 DOM 节点，console.log 会将这个元素渲染成像是从 Elements 中剪切出来的一样。如果你想查看这个节点所关联到的真实 js 对象，或查看它的属性，这时就可以使用 console.dir，或直接使用 dir() 也是一样的效果。

console.table.dir

Network 面板

平时前端同学在与后端同学交互时，用的最多的就是 Network 了，接下来就是 Network 相关的一些实用技巧。

重发 newwork 请求: 右键单击请求，选择 replay XHR。
复制 response: 右键单击请求，选择 copy response。
在控制台快速发起请求: 右键单击请求，选择 copy as fetch，直接在控制台进行接口的调用。

Network

Sources 面板

平时我们在 debug 代码时，就经常用到 Sources，接下来我们就了解下 Sources 相关的小功能。

复用代码块：在 Sources 中有一个小功能，叫 Snippets。它是做什么的呢。比如我们平时有一些经常用到的脚本代码需要在浏览器中执行，又不想反复的复制粘贴执行，这时候就可以用到它了！路径：sources -> Snippets: 新建代码块。运行：sources 中 cmd + enter 或鼠标右键选择run，或全局下 cmd + p，输入!根据名字使用预设 snippets。

复用代码块

条件断点：如果我们想在浏览器直接调试，并且只在特定条件下触发断点，这时我们就可以使用条件断点: sources->Add conditional breakpoint(添加条件断点)。

条件断点

chrome 中开发：如果喜欢微信开发者工具式的开发方式，可以使用 devTools 中的 workspace：sources-FileSystem-Add Folder to workspace，对本地文件直接进行开发修改，修改会及时同步到当前文件。

chrome中开发

Drawer 面板

Drawer 面板可以理解为控制台的简版，其中还包含了比如 Animations（动画检查器）、Coverage（检查代码）、Changes（代码改动监测器）等小功能，这里我主要讲解下 changes 的使用。

打开/关闭 drawer：Esc 键可以切换 drawer 的显示与隐藏。
检查修改的内容：Drawer-changes, 可以查看到在浏览器中修改的样式与之前的对比，而 changes 最下方可以对修改进行复制和回撤。

Drawer

其他技巧

打开命令面板：快捷键 cmd+shift+p。

截屏：打开命令面板后，搜索 Capture，选择 Capture full size screenshot 可以对当前页面进行全屏截屏；如果只是想要对单个 node 节点进行截屏，可以选择 Capture node screenshot 进行 node 截屏；如果只是对当前视窗页面进行截屏，则选择 Capture screenshot；如果想自己在页面选截屏区域，选 Capture area screenshot。

Capture

theme 切换: 打开命令面板后，搜索 theme，选择 Switch to dark theme 或 Switch to light theme 可以对当前浏览器的主题色进行切换。

theme

总结

至此，本篇文章关于 chrome 的技巧就分享完了。

本篇文章主要总结了 Elements、Console、Network、Sources、Drawer 相关的技巧。当然，devTools 还有很多其他很有用的技巧等待大家继续探索，这篇文章只是抽取了平时可能经常用到的一些功能进行的总结。

希望这篇文章可以帮助大家更高效的开发，新的一年了，也祝大家都可以升职加薪，心如所愿！

参考链接

developers.google.com/web/tools/c… developers.google.com/web/tools/c… xie.infoq.cn/article/175…

作者介绍

李馨馨：日常热衷中医养生的佛系girl~

chrome小技巧