隐藏页面上的元素，但不改变布局
在开发者工具的 Elements（或 Inspector）工具中，你可以通过在工具中选择节点，然后按下Delete 或 Backspace键来从 DOM 树中删除节点。虽然这样做可以完全移除元素并使其他元素占据更多空间，但也可能破坏页面的 CSS 布局。
在不改变DOM树或布局的情况下隐藏元素，在某些情况下非常有用，例如：
- 当元素重叠在一起时，你想查看它们后面的内容。
- 当你想截取页面的截图时，不希望某些信息显示出来。
- 当你想专注于页面的某一部分而不被其他元素干扰时。
要在不从 DOM 树中移除元素的情况下隐藏它，在开发者工具中进行如下操作：
- 进入
Elements工具（在Firefox中称为Inspector）。
- 进入
-
- 选择你想隐藏的元素：
- 可以通过右键点击元素并选择
Inspect，从页面上选择。 - 或者在工具中通过查找并点击
DOM树中的元素来选择。
- 在键盘上按下
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中，你可以播放音频蜂鸣声来实现这一功能！这样你可以听到该行代码已执行，而不会让控制台被更多的消息混乱。
要添加音频断点：
- 在代码的行号处点击添加断点。
- 右键点击断点，选择编辑断点。
- 点击“添加操作”，从操作下拉菜单中选择“播放声音”。
- 勾选“在评估后自动继续”选项，以避免在该行暂停执行。
就是这样！现在每当这行代码执行时，将会播放一个音频蜂鸣声。
你可以右键点击断点并选择“删除断点”来移除它。
网友评论