DevTools 技巧合集五

隐藏页面上的元素，但不改变布局

在开发者工具的 Elements（或 Inspector）工具中，你可以通过在工具中选择节点，然后按下Delete 或 Backspace键来从 DOM 树中删除节点。虽然这样做可以完全移除元素并使其他元素占据更多空间，但也可能破坏页面的 CSS 布局。

在不改变DOM树或布局的情况下隐藏元素，在某些情况下非常有用，例如：

• 当元素重叠在一起时，你想查看它们后面的内容。
• 当你想截取页面的截图时，不希望某些信息显示出来。
• 当你想专注于页面的某一部分而不被其他元素干扰时。

要在不从 DOM 树中移除元素的情况下隐藏它，在开发者工具中进行如下操作：

• 1. 进入Elements工具（在 Firefox中称为 Inspector）。
• 2. 选择你想隐藏的元素：
  • 可以通过右键点击元素并选择 Inspect，从页面上选择。
  • 或者在工具中通过查找并点击 DOM树中的元素来选择。
• 3. 在键盘上按下H键。

元素将保留在 DOM 树中，但在页面中变为不可见状态。

要再次显示元素，确保在 Elements（或Inspector）工具中选中它，并再次按下 H 键即可。

从网页或屏幕上选择一种颜色。

在处理网页的CSS时，使用开发者工具中的Elements或Inspector工具时，有时你可能想要重用网页上现有的颜色，或者屏幕上的颜色，但可能不知道确切的颜色值。例如，当你想选择的颜色是图片的一部分时，就会出现这种情况。

要从检查的网页上的像素或整个屏幕上复制颜色值，请使用开发者工具中的取色器工具（Eye Dropper）。

在Firefox中：

在Firefox中，你可以以两种方式使用取色器工具：一种是将颜色复制到剪贴板，另一种是在Rules选项卡中更改CSS代码中显示的颜色。

复制颜色到剪贴板：

• 打开开发者工具并进入Inspector工具。
• 点击位于Inspector工具栏上方DOM树面板上方的"从页面中获取颜色"按钮。
• 页面中将出现取色器工具。
• 将鼠标移到网页上以找到要复制的颜色，然后单击。

• 颜色值将被复制到你的剪贴板中。

  

更改CSS代码中的颜色：

• 打开开发者工具并进入Inspector工具。
• 在Rules选项卡中找到要更改的CSS颜色值。
• 点击颜色值旁边的彩色圆圈。
• 将显示颜色选择器下拉菜单。
• 点击颜色选择器下拉菜单左下角显示的取色器图标。
• 页面中将出现取色器工具。
• 将鼠标移到网页上以找到要使用的颜色，然后单击。

• Rules选项卡中显示的颜色值将更改为你选择的颜色。

  

在Chrome、Edge和Safari中：

Chrome和Edge没有将颜色复制到剪贴板的方式。它们仅支持使用取色器工具来更改Styles面板中显示的CSS代码中的颜色。但是，这些浏览器支持从整个屏幕中获取颜色，而不仅限于网页。

• 打开开发者工具并进入Elements工具。
• 在Styles面板中找到要更改的CSS颜色值。
• 点击颜色值旁边的彩色方块。
• 将显示颜色选择器下拉菜单。
• 点击颜色选择器下拉菜单中的取色器图标。
• 你的鼠标将变成取色器工具。
• 将鼠标移到网页或屏幕上以找到要使用的颜色，然后单击。
• Styles面板中显示的颜色值将更改为你选择的颜色。
  

在执行一行JavaScript代码时播放声音

有时候，当执行一行JavaScript代码时暂停执行可能显得过于繁琐，有时你只想知道该行是否执行了，并不想在那里暂停。

为了实现这一点，你可以在代码中添加console.log() 语句，或者使用日志断点（logpoints）。
在Safari中，你可以播放音频蜂鸣声来实现这一功能！这样你可以听到该行代码已执行，而不会让控制台被更多的消息混乱。
要添加音频断点：

1. 在代码的行号处点击添加断点。
2. 右键点击断点，选择编辑断点。
3. 点击“添加操作”，从操作下拉菜单中选择“播放声音”。
4. 勾选“在评估后自动继续”选项，以避免在该行暂停执行。

就是这样！现在每当这行代码执行时，将会播放一个音频蜂鸣声。

你可以右键点击断点并选择“删除断点”来移除它。