DevTools 技巧合集五

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

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

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

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

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

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

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


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

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

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

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

在Firefox中:

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

复制颜色到剪贴板:
  • 打开开发者工具并进入Inspector工具。
  • 点击位于Inspector工具栏上方DOM树面板上方的”从页面中获取颜色”按钮。
  • 页面中将出现取色器工具。
  • 将鼠标移到网页上以找到要复制的颜色,然后单击。
  • 颜色值将被复制到你的剪贴板中。
更改CSS代码中的颜色:
  • 打开开发者工具并进入Inspector工具。
  • Rules选项卡中找到要更改的CSS颜色值。
  • 点击颜色值旁边的彩色圆圈。
  • 将显示颜色选择器下拉菜单。
  • 点击颜色选择器下拉菜单左下角显示的取色器图标。
  • 页面中将出现取色器工具。
  • 将鼠标移到网页上以找到要使用的颜色,然后单击。
  • Rules选项卡中显示的颜色值将更改为你选择的颜色。

    在Chrome、Edge和Safari中:

    ChromeEdge没有将颜色复制到剪贴板的方式。它们仅支持使用取色器工具来更改Styles面板中显示的CSS代码中的颜色。但是,这些浏览器支持从整个屏幕中获取颜色,而不仅限于网页。
  • 打开开发者工具并进入Elements工具。
  • Styles面板中找到要更改的CSS颜色值。
  • 点击颜色值旁边的彩色方块。
  • 将显示颜色选择器下拉菜单。
  • 点击颜色选择器下拉菜单中的取色器图标。
  • 你的鼠标将变成取色器工具。
  • 将鼠标移到网页或屏幕上以找到要使用的颜色,然后单击。
  • Styles面板中显示的颜色值将更改为你选择的颜色。

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

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

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

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

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

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