在前端组件中，有不少组件对鼠标的响应并不是通过 CSS 的 hover 来触发的，而是通过 JavaScript 监听对应的鼠标事件，然后再进一步修改 DOM 的结构。比如，Ant Design 中的 Popover 控件，在鼠标移上去后，会在 DOM 中插入一组元素，并在鼠标移开后删除。
在这种情况下，一旦出现样式上的问题，就不容易在 DevTool 中对样式进行查看了。因为只要一点击右键审查元素，Popover 的内容很可能就会因为触发了鼠标事件而消失不见。
对于这种情况，没法直接用 DevTool 中的 CSS 模拟来强制样式显示。如果需要通过触发事件来触发 DOM 的修改机制（不论是 dispatchEvent 还是在 React Extension 中触发回调），总体上是比较麻烦的。因为组件的层级结构很可能很复杂，知道应该往哪儿触发什么事件，也不是个容易的事情。
既然从程序的角度触发比较复杂，不如换个思路，考虑从行为的角度来触发。比如，如果是通过鼠标悬停触发的样式修改，那么就直接通过这种行为来触发。唯一的问题是：应该如何保持这种样式，不在鼠标离开的时候被重制（否则就没法在 DevTool 里进行查看了）。
这种时候，有一个简单的方法可以“暂停”浏览器。在 Console 中输入：
setTimeout(() => { debugger; }, 3000);就会在三秒后触发 debugger，从而暂停 JavaScript 的执行。这时候，鼠标离开的事件不会得到响应，也就可以安心在 DevTool 中对样式进行仔细的查看和调整了。
当然，这里触发 debugger 的方式可以根据实际情况来写。只要保证在 DOM 改变后触发 debugger 就可以了。