2024年了，难道还不会使用谷歌DevTools么？

我相信您一定对Chrome浏览器非常熟悉，因为它是前端开发者最亲密的伙伴。我们可以使用它查看网络请求、分析网页性能以及调试最新的JavaScript功能。

除此之外，它还提供了许多功能强大但不常见的功能，这些功能可以大大提高我们的开发效率。

让我们来看看。

1. 重新发送XHR请求

在我们的工作中，我们经常需要与后端开发人员调试接口。使用此功能可以提高我们的对接效率。

您只需执行以下步骤：

1、选择Network面板
2、单击Fetch/XHR
3、选择要重新发送的请求
4、右键单击并选择Replay XHR

2. 在控制台中快速发送请求

对于同一个请求，有时需要修改输入参数并重新发送。有什么快捷方式？

您只需执行以下步骤：

1、选择Network面板。
2、单击Fetch/XHR。
3、选择要重新发送的请求。
4、选择Copy as fetch面板。
5、修改输入参数并重新发送。

3. 复制JavaScript变量

如何将复杂数据复制到剪贴板？

令人惊讶的是，您可以使用Chrome浏览器提供的Copy功能来实现这一点。

4. 在控制台中获取选定的DOM元素

当我们通过“Elements”面板选择一个元素时，如果我们想通过JavaScript打印其中的一些属性，例如宽度、高度、位置等，该怎么做呢？

1、通过Elements panel选择DOM元素。
2、在控制台中使用$0访问元素。

5.

截取全尺寸屏幕截图
如果我们想对一个超过一屏的页面进行截图，有什么好方法吗？

强大的Chrome浏览器可以轻松做到这一点。

1、准备好你想要截取的页面内容
2、CMD + Shift + P 执行 Command命令
3、输入 Capture full size screenshot 并按回车
哇，太酷了！

现在有一个新问题。我们只想截取部分页面的截图。该怎么做？

这也很容易，只需要在第三步中输入 “Capture node screenshot”。

6.展开所有子节点

如何一次展开一个DOM元素的所有子节点？而不是一个一个展开？

你可以在“elements”面板中使用键组合“Alt + click”一次展开所有子节点。

7.

使用“$”引用上次执行的结果
让我们看一下这个场景：我们对字符串进行了各种操作，然后我们想知道每一步的结果，该怎么做？

你可能会这样做

一个更简单的方法：

使用“$”获取上次操作的结果，而无需每次都复制。

8.

快速切换主题颜色
有些人喜欢Chrome的白色主题，有些人喜欢黑色。我们可以使用快捷键在两种主题之间快速切换。

1、cmd + shift + p 执行Command命令
2、输入“Switch to dark theme”或“Switch to light theme”切换主题

9. 使用“$"和"$$"快速选择DOM元素

在控制台中使用document.querySelector和document.querySelectorAll选择当前页面的元素是最常见的需求，但是它们有点太长，我们可以使用$和$$来代替。

10.

在控制台中使用$I安装npm包
有时我想使用一个API，比如dayjs或lodash，但我不想去官方网站查看。如果能直接在控制台上试一试就好了。

1、安装Console Importer插件
2、使用$i(‘name’)安装npm包

11. 添加条件断点

对于以下代码，我们希望食物的名称是时触发断点。我该如何做呢？

在大量数据的情况下，使用条件断点对开发工作将非常有帮助，大大提高效率。