DevTools 调试技巧 —暂停 UI 在 hover 状态下

作为一名前端工程师，对 Chrome 的 DevTools 调试工具再熟悉不过，开发过程中，我们经常使用其来调试页面 UI，调试接口，debug问题等等，那在调试 UI 时，大部分都是调试在静态状态下的元素，当我们需要检查一个在 hover 状态下才显示的元素时我们是如何检查的呢？比如检查一个 Tooltip 元素，按照正常操作，进行右键检查元素，元素会消失，那么这种情况下，我们有什么方法解决这种场景下的问题，本篇文章将介绍一种调试技巧来解决此问题

使用场景

检查一个在hover状态才显示的元素

使用步骤

1. 打开「控制台」，进入「源代码」功能区。
2. 显示需要检查的元素。如tooltip，hover元素显示tooltip。
3. 暂停脚本执行。即使用快捷键 「comand + \」 或「F8，让 hover 后的元素暂停在hover的状态
4. 选择 hover 下显示的元素，跳转到「元素」下的具体元素。选择「控制台」功能bar最左边的「选择元素」按钮，点击 hover 状态的元素，会跳转到「元素」功能区下具体元素，可与普通的检查元素一样去检查素元素了。

效果预览