如何检查浏览器调试扩展中的动态内容？答案

【问题标题】：How to inspect dynamic content in browser debugging extensions?如何检查浏览器调试扩展中的动态内容？
【发布时间】：2017-10-26 00:00:28
【问题描述】：

我有弹出窗口，当鼠标悬停在某个对象上时会出现在我的网站上。一旦发生这种情况，我可以按（在 Chrome 中）Ctrl-Shift-C 并激活元素选择模式并选择弹出窗口内的任何元素。但是一旦我做出选择，网页就会进入正常流程，并且弹出窗口会立即消失，因为鼠标不再处于正确的位置。

是否有可能以某种方式克服这种情况？比如选择元素，但不终止选择模式？

【问题讨论】：

我通常在 devtools -> sources -> event listener breakpoints -> mouse 的鼠标事件上设置断点。它会暂停 js 引擎，因此元素会一直保留到我恢复执行为止。

【解决方案1】：

Chrome 和 Firefox 都可以在各自的 DevTools 中设置和保持设置伪类，如悬停、活动和焦点。这允许您使用页面，就好像鼠标正在与您更改伪类的元素交互一样。

以下显示在 SO 顶部导航栏中的文档链接上切换悬停伪类。

这是它在 Chrome 中的样子：

这是它在 Firefox 中的样子：

【讨论】：