你可能不知道的 Chrome 开发者工具实用技巧和提示
长期以来，Google Chrome 浏览器一直是我最喜爱的开发浏览器。其强大的开发工具功能也是原因之一。
这篇文章是我一年前在自己的博客上发表的文章的转发——您可能不知道的酷炫 Chrome Dev Tools 技巧和窍门。
下面您将看到我多年来在 Chrome Dev Tools 中发现的一些很酷的技巧和提示的列表。
- 开发工具主题
- 开发工具面板布局
- 在开发工具面板之间切换
- 在 CSS 属性之间切换
- 切换元素可见性
- 编辑元素属性
- 搜索 DOM 树
- 添加设备
- 添加新样式快捷方式
- 编辑页面上的任意文本内容
- 将值作为全局变量存储在控制台中
- 增加 CSS 值
- DOM 元素作为全局变量
- 在颜色格式之间切换
- 返回控制台中最后一个表达式的计算值
- 奖励：展开已记录到控制台的对象的所有子属性
1. 开发工具主题
开发者工具有办法在明暗主题之间切换。在“设置”的“外观”下，选择明暗主题。
2. 开发工具面板布局
在某些情况下，使用某种类型的面板布局会更加舒适。
您可以在以下三种布局中进行选择：
- 水平的;
- 垂直的;
- 汽车。
它可以在“外观”下的“设置”中设置。
3. 在开发工具面板之间切换
有一种简单的方法可以通过键盘在 Dev Tools 面板之间切换。
- cmd+ ]/[适用于 MAC；
- ctrl+ ]/[适用于 Windows 和 Linux。
4. CSS 属性之间的切换
在“样式”面板中单击 CSS 属性并按：
- tab跳转到下一个属性；
- tab+shift跳转到上一个属性。
5. 切换元素可见性
h您可以通过按下选定元素上的键轻松切换元素 DOM 树内的元素可见性。
6.编辑元素属性
在元素 DOM 树中，按下enter所选元素上的 键可编辑属性。按下tab可编辑下一个属性，按下tab+shift可编辑上一个属性。
7. 搜索DOM树
要查找 DOM 树中的任何属性、元素、内容或任何其他字符串，只需按：
- cmd+f适用于 MAC；
- ctrl+f适用于 Windows 和 Linux。
8.添加设备
您可以在“设备”工具栏中启用/禁用现有设备或添加自定义设备。在“设置”
中，点击“设备”选项卡。您将看到现有设备列表，您可以在其中启用/禁用设备。或者，您也可以点击“添加自定义设备...”按钮来添加新设备。
9. 添加新样式快捷方式
要快速添加新样式，例如：
- 颜色;
- 背景颜色；
- 文字阴影；
- 盒子阴影。
将鼠标悬停在左下角的小图标 ( ⋮
) 上，即可显示上述选项。 要插入新的样式规则，请点击下方的+图标。
10.编辑页面上的任意文本内容
在控制台中写入document.designMode = "on"，您将能够立即编辑页面上的任何文本内容。
11. 将值存储为控制台中的全局变量
任何返回的对象或函数类型的数据都可以作为全局变量存储在控制台中。例如，console.log(['a', 'b'])返回一个数组。右键单击它，然后选择“存储为全局变量”，即可temp1在控制台中通过关键字访问该变量。
注意：这些变量是临时的，仅在当前会话期间可用，这意味着页面刷新后它们将消失。
12. 增加 CSS 值
通过使用某些组合键，可以轻松地增加或减少 CSS 数字值：
- 将值增加 1 ↑；
- 将值减少 1 ↓；
- 将值增加 0.1 alt+ ↑；
- 将值减少 0.1 alt+ ↓；
- 将值增加 10 shift+ ↑；
- 将值减少 10 shift+ ↓；
- 将值增加 100 cmd+ ↑（MAC）、ctrl+ ↑（Windows 和 Linux）；
- 将值减少 100 cmd+ ↓（MAC），ctrl+ ↓（Windows 和 Linux）。
13. DOM元素作为全局变量
DOM 元素可以在控制台中作为全局变量存储和访问。在 DOM 树中，右键单击元素标签，然后点击“存储为全局变量”。
注意：这些变量是临时的，仅在当前会话期间可用，这意味着页面刷新后它们将消失。
14. 在颜色格式之间切换
shift您可以通过按住键并单击值旁边的颜色预览框来轻松更改颜色格式。
15. 返回控制台中最后一个表达式的值
$_在控制台中返回最后计算的表达式的值。
奖励：展开已记录到控制台的对象的所有子属性
一旦记录了对象，按住alt键并单击展开▸图标。
