Chrome DevTools 可以做到这一点吗？

Google Chrome是目前开发者最常用的网络浏览器之一。Chrome DevTools可以帮助您直接在浏览器中开发、测试和调试网站，从而显著改善您的工作流程。

然而，还有很多我们不知道的技巧和窍门可以帮到我们。虽然我们在菜单中看不到它们，但这并不意味着我们不应该利用它们来提高工作效率。

因此，我受到了Burke Holland和Sarah Drasner撰写的“VS Code 可以实现这个功能”系列文章的启发，决定在这里写下这些内容。希望它能帮助到你，就像它每天都在帮助我和其他很多人一样👌。

你准备好了吗？开始吧：

屏幕截图

您可以截取整页或屏幕内容，无需任何扩展程序。只需按CTRL++ （Windows 用户）或Shift++ （Mac用户）打开命令面板，然后输入以下命令即可查看包含三个选项的菜单：PCmdShiftPscreenshot

• 截取全尺寸屏幕截图
• 截取屏幕截图
• 捕获节点截图

选择任何选项都会将网站图像保存到您的计算机。

在元素面板中拖放

我直到上周才知道这个功能，真是太棒了。你可以在元素面板中将元素拖放到任何你想要的位置，它的变化会反映在页面上。如果你想快速查看细微改动后的效果，这个功能非常实用。

Pretty Print { } 缩小源代码

有时，您希望看到与原始代码格式相同的源代码。这对于 CSS 规则或代码的美观性更有帮助。这个内置功能在调试 CSS 规则时节省了我不少时间。只需点击{}页面底部的 即可。

在控制台中引用选定的元素

有时您可能希望使用 JavaScript 来操作元素，而不是更改元素面板内的 HTML。

监视表达式

很多时候，你会想观察某个特定的表达式，看看它在特定情况下会如何变化。这很简单，只需将表达式添加到“观察”部分即可：

正如您所见，您可以看到使用 的最后一个表达式$_。

片段

我们每个人都会不时地使用一些重复的代码片段。从点击处理程序的模板到文档就绪函数，它可以是任何东西。这时代码片段部分就派上用场了。您可以存储代码片段并轻松使用。只需打开代码片段部分并点击 即可new。写下您的代码片段，每当您想要使用它时，按Ctrl+ Enter（Windows 用户）或Cmd+ Enter（Mac 用户），或者右键单击并按run。

覆盖位置

如果您正在编写一个 Web 应用程序，其中包含与用户位置相关的信息，您可能需要检查该应用程序是否能够根据用户位置按预期运行。这时，Chrome DevTools 中的位置覆盖功能就非常有用了。只需按Ctrl+ Shift+ P（Windows 用户）或Cmd+ Shift+ P（Mac 用户）打开命令面板，输入sensors，然后从覆盖位置下拉菜单中选择其他位置。您甚至可以将其设置为自定义经纬度（如果有）。

编辑屏幕上的任何文本

有时页面宽度有限，你想看看长文本在页面上的显示效果。或者你只是想检查文本足够长时是否显示省略号。Chrome DevTools 有一个叫做设计模式的功能，你可以在控制台中设置它，然后更改任何你想要的文本并实时查看效果。是不是很酷？😎

这篇文章就到这里。敬请期待下一篇文章👀。