如何冻结在 devtools 中的悬停

当我们在使用开发者工具（devtools）进行调试时，有时候需要对悬停状态进行调试，这时候，我们可以使用 devtools 的一个非常有用的特性：冻结在悬停状态中。

如何冻结在悬停状态中

1. 打开浏览器并进入调试模式（F12 或者通过菜单进入 devtools）。

2. 在 Elements 面板中选择悬停状态的元素。

3. 右键点击选择的元素，并选择 Break on... -> Subtree Modifications.

4. 刷新页面，将鼠标悬停在选择的元素上。

5. devtools 将会在 Elements 面板中自动滚动到选择的元素所在的位置，并在 Sources 面板中暂停代码执行。

6. 这时候，你可以在 Sources 面板中进行调试，查看代码的执行过程。

7. 如果需要恢复代码执行，可以简单地点击 Resume script execution 按钮。

代码片段

// 在 Elements 面板中选择元素，并右键点击它
// 选择 `Break on...` -> `Subtree Modifications`
// 刷新页面，尝试鼠标悬停在该元素上
// devtools 将会在 Elements 面板中自动滚动到元素所在的位置，并暂停代码执行
debugger; // 在 Sources 面板中设置断点，进行调试

结论

冻结在悬停状态中是 devtools 的一个强大特性，可以帮助开发人员快速进行代码调试，提高开发效率。同时，这个特性还可以被用于更加复杂的场景，比如调试 mouseover 事件、拖拽事件等等。