你可能不知道的 Chrome 开发者工具实用技巧和提示

长期以来，Google Chrome 浏览器一直是我最喜爱的开发浏览器。其强大的开发工具功能也是原因之一。

这篇文章是我一年前在自己的博客上发表的文章的转发——您可能不知道的酷炫 Chrome Dev Tools 技巧和窍门。

下面您将看到我多年来在 Chrome Dev Tools 中发现的一些很酷的技巧和提示的列表。

1. 开发工具主题

开发者工具有办法在明暗主题之间切换。在“设置”的“外观”下，选择明暗主题。

在某些情况下，使用某种类型的面板布局会更加舒适。
您可以在以下三种布局中进行选择：

它可以在“外观”下的“设置”中设置。

有一种简单的方法可以通过键盘在 Dev Tools 面板之间切换。

在“样式”面板中单击 CSS 属性并按：

h您可以通过按下选定元素上的键轻松切换元素 DOM 树内的元素可见性。

在元素 DOM 树中，按下enter所选元素上的键可编辑属性。按下tab可编辑下一个属性，按下tab+shift可编辑上一个属性。

要查找 DOM 树中的任何属性、元素、内容或任何其他字符串，只需按：

您可以在“设备”工具栏中启用/禁用现有设备或添加自定义设备。在“设置”
中，点击“设备”选项卡。您将看到现有设备列表，您可以在其中启用/禁用设备。或者，您也可以点击“添加自定义设备...”按钮来添加新设备。

要快速添加新样式，例如：

将鼠标悬停在左下角的小图标 ( ⋮
) 上，即可显示上述选项。要插入新的样式规则，请点击下方的+图标。

在控制台中写入document.designMode = "on"，您将能够立即编辑页面上的任何文本内容。

任何返回的对象或函数类型的数据都可以作为全局变量存储在控制台中。例如，console.log(['a', 'b'])返回一个数组。右键单击它，然后选择“存储为全局变量”，即可temp1在控制台中通过关键字访问该变量。

注意：这些变量是临时的，仅在当前会话期间可用，这意味着页面刷新后它们将消失。

通过使用某些组合键，可以轻松地增加或减少 CSS 数字值：

DOM 元素可以在控制台中作为全局变量存储和访问。在 DOM 树中，右键单击元素标签，然后点击“存储为全局变量”。

注意：这些变量是临时的，仅在当前会话期间可用，这意味着页面刷新后它们将消失。

shift您可以通过按住键并单击值旁边的颜色预览框来轻松更改颜色格式。

$_在控制台中返回最后计算的表达式的值。

一旦记录了对象，按住alt键并单击展开▸图标。