小机灵鬼|Chrome 开发者工具的 11 个高级使用技巧

2026-01-17

本文作者从开发者角度出发，介绍了几个关于 Chrome 开发者工具的高级用法。熟练使用这些高级用法可以大大地提高你的生产力。如果你选择 Chrome 作为开发环境，那么你应该知道下面关于它的 11 个使用技巧。
图片来源 Morning Brewon ， Unsplash
好了，现在由于某种原因，你最终选择了 Chrome 浏览器作为开发及调试的环境。接下来，打开开发者工具并开始调试代码。
很多时候你可以打开“控制台”面板来检查程序的输出，或者打开“元素”面板来检查 DOM 元素的 CSS 代码。
但是你真的了解 Chrome 开发者工具吗？实际上，它提供了许多强大但很多人未知的功能，可以极大地提高我们的开发效率。
在这里，我将介绍几个最有用的功能，希望能对你有所帮助。
在开始之前，我想介绍一下 Chrome 的命令菜单。命令菜单之于 Chrome ，就像 Shell 之于 Linux 一样。你可以在键盘敲入相应命令来操作 Chrome 。
首先，我们打开 Chrome 开发者工具，然后使用以下快捷键打开命令菜单：

windows：Ctrl + Shift + P
macOS：Cmd + Shift + P

或者我们可以按照下图所示的步骤将其打开：

小机灵鬼|Chrome 开发者工具的 11 个高级使用技巧

然后，我们可以转到“命令”面板，在这里我们可以输入一些命令来执行很多强大的功能。

小机灵鬼|Chrome 开发者工具的 11 个高级使用技巧

1. 强大的屏幕截图捕获屏幕内容是一个非常常见的功能需求，当然我非常确定在你当前的计算机上已经有了非常方便的截图工具了。但是，你可以完成以下任务吗？

截取网页上所有内容的屏幕快照，包括可视窗口中未显示的所有内容。
精确捕获 DOM 元素的内容。

这是两个很普通的要求，但是使用操作系统随附的屏幕截图工具不太容易解决。这个时候，我们可以在 Chrome 使用相关命令来帮助我们完成此要求。
上面两个需求的对应的命令是：

Screenshot Capture full size screenshot
Screenshot Capture node screenshot

举个例子
现在可以打开任意的网页，例如， Medium 上 JavaScript 的热门文章页面。
打开“命令”菜单并执行Screenshot Capture full size screenshot 。

小机灵鬼|Chrome 开发者工具的 11 个高级使用技巧

然后，我们可以就获得当前页面的完整屏幕截图了。

小机灵鬼|Chrome 开发者工具的 11 个高级使用技巧

上面的原始图像实际上非常清晰，只是在这里我上传了压缩图像以节省你的流量。
同样地，如果要截取某个 DOM 元素的屏幕截图，就完全可以使用系统自带的屏幕截图工具，但当窗口不能完全捕获该元素内容时，此时，你可以使用Capture node screenshot命令。

推荐阅读

上一篇：爱集微APP|东晶电子上半年净利增长119.65%，谐振器产品贡献九成营收

下一篇：应该怎么看待自封经济学家的言论，诺贝尔获奖者有话说