如何在 devtools 中悬停时冻结

在开发者工具(devtools)中，我们经常需要查看网页中某个元素的CSS样式或调试JavaScript代码。当我们悬停在一个元素上时，它通常会在页面上高亮显示，但是如果我们想要暂停这个高亮效果，可以通过以下方法来实现。

1. 使用“Pause on hover”功能

打开开发者工具，在Elements（元素）选项卡中，点击左侧的鼠标图标，即可启用“Pause on hover”（悬停时暂停）功能。

当勾选了该选项后，在悬停元素时，开发者工具将会暂停高亮显示，同时在控制台中打印出相关信息。

2. 使用元素面板

在Elements（元素）选项卡中，右键点击要查看的元素并选择“Scroll into view”（滚动到视图），可以将该元素滚动到可见区域，并在屏幕中央标记出该元素。接着，点击该元素右侧的“...”按钮，选择“Freeze element state”（冻结元素状态），即可冻结该元素的状态。

这种方法比使用“Pause on hover”功能更直接，同时也更精确。不过，需要手动点击相应的按钮才能使用，不太方便。

3. 使用JavaScript代码

在Elements（元素）选项卡中，点击要调试的元素，并切换到Console（控制台）选项卡。在控制台中输入以下代码，即可冻结该元素的状态。

debug($0)

其中，$0代表最近被选中的元素。在控制台输入该代码后，可以看到开发者工具进入了debug模式，同时元素的CSS样式被冻结在当前状态。

这种方法需要手动输入代码，但对于开发者来说，更加灵活。另外，这种方法还可以在JavaScript代码中使用，方便在代码中调试。

以上是冻结开发者工具中悬停时高亮显示的方法，可以根据自己的需要选择适合自己的方式来使用。