如何在chrome element面板调试一个需要页面交互才能显示，交互结束会立刻消失的节点？

Question

复杂页面有一个元素，需要页面交互才会被创建，比如拖动操作才会显示出来，但是如果需要交互就无法去chrome element面板里找这个element了。一旦鼠标移动到element面板，交互结束，这个元素就会消失，也无法看到它，如何才能在element里调试它，以及它的样式呢？

希望能在element面板调试它的样式，看它的html属性等

Answer 1

参考之前的一个回答，弄一个延时的 debugger ，然后把鼠标放上去，等待 debugger 生效，就会暂停在那里了。

• 前端 - 浏览器怎么在控制台修改日历弹框样式？ - SegmentFault 思否

Answer 2

是的，我每次都是在控制台写一个 setTimeout(() => {debugger}, 3000)， 然后去页面上操作，操作完等这个debugger生效就可以了

Answer 3

选中元素后，点击这里，模拟hover active focus 等状态