引言

既然每天都要打开控制台，为什么不让自己的操作更加酷炫呢？

认真看完，一定有你不知道的调试技巧，一定有你想要的装 x 操作。

翻译原文：Cool Chrome DevTools tips and tricks you wish you knew already

^{ps：本瓜阅读原文最开始就大意了(浏览器调试谁不知道？)，起初是，“就这”？读完后，“真香”！}

1. 在“Elements”面板拖放元素

在“Elements”面板中，您可以拖放任何 HTML 元素并更改其在页面中的位置。

2. 在“Console”中显示当前选定的元素

在“Elements”面板中选择一个节点，然后在“Console”中输入$0进行调用显示。

3. 在“Console”中使用上一次操作的值

使用$_引用在“Console”中执行的上一个操作的返回值。

4. 添加 CSS 并编辑元素状态

在“Elements”面板中，有两个超级有用的按钮。

第一个，您可以使用所需的任何选择器来添加新的CSS属性，但当前选择的元素不可为空：

第二个，您可以触发所选元素的状态，这样就可以查看其处于活动状态，悬停状态或焦点对准时所对应的样式。

5. 保存修改后的 CSS 文件

单击您编辑的 CSS 文件的名称。检查器会将其打开到“Sources”面板中，然后您可以将其与您实时编辑的样式应用一起保存。

6. 单个元素截图

选择一个元素，然后按cmd-shift-p（或Windows系统中的ctrl-shift-p）打开“命令”菜单，然后选择Capture node screenshot进行屏幕截图

7. 使用CSS选择器查找元素

按下cmd-f（在Windows系统中中为ctrl-f）可在“Elements ”面板中打开搜索框。

您可以在其中输入任何字符串以匹配源代码，也可以使用 CSS 选择器使 Chrome 跳转到对应图像：

8. 在“Console”中按 Shift-enter 键

要在“Console”面板中编写跨行的命令，请按shift-enter。

在脚本末尾按Enter键执行该脚本：

9. 跳转到…

在“Sources ”面板中：

• cmd-o（在Windows系统中为ctrl-o），显示您的页面加载的所有文件。
• cmd-shift-o（在Windows系统中为ctrl-shift-o）显示当前文件中的符号（属性，函数，类）。
• ctrl-g转到特定行。

10. 监听表达式

您无需在调试的过程中一遍又一遍地写一个变量名或一个表达式，而是将其添加到“监听表达式”列表中。

11. XHR/Fetch 调试

在调试器中，打开XHR/Fetch Breakpoints面板。

您可以在XHR/Fetch调用时设置断点，或者在特定的调用时设断点：

12. 调试 DOM 修改

右键单击一个元素，然后选择“Break on Subtree Modifications”。每当脚本遍历该元素的子元素并对其进行修改时，调试器都会自动停止，以便您检查测试。

本文使用 mdnice 排版