如何检查浏览器中的消失元素?

How can I inspect an element which disappears when my mouse moves away? 如何检查浏览器中的消失元素?

如何检查鼠标移动时消失的元素?

I don't know it's ID, class or anything but want to inspect it.

我不知道它是ID，类还是别的什么，只是想检查一下。

Solutions I have tried:

解决方案我已经尝试:

Run jQuery selector inside console $('*:contains("some text")') but didn't have any luck mainly because the element is not hidden but probably removed from the DOM tree.

在控制台$('*:contains("some text"))中运行jQuery选择器，但由于元素不是隐藏的，而是可能从DOM树中删除，所以没有任何运气。

Manually inspecting DOM tree for changes gives me nothing as it seems to be just too fast to notice what have changed.

手动检查DOM树以查看更改，不会得到任何结果，因为它似乎很快就会注意到更改的内容。

SUCCESS:

成功:

I have been successful with Event breakpoints. Specifically - mousedown in my case. Just go to Sources-> Event Listener Breakpoints-> Mouse-> mousedown in Chrome. After that I clicked the element I wanted to inspect and inside Scope Variables I saw some useful directions.

我已经成功地实现了事件断点。具体地说，在我的案例中是mousedown。只需进入source ->事件监听器断点->鼠标->鼠标左键。之后，我单击了要检查的元素，并在范围变量内部看到了一些有用的方向。

5 个解决方案

#1

(This answer only applies to Chrome Developer Tools.)

(这个答案只适用于Chrome开发工具。)

Find an element that contains the disappearing element. Right click on the element and apply "Break on... > Subtree Modifications." This will throw a debugger pause before the element disappears, which will allow you to interact with the element in a paused state.

查找包含消失元素的元素。右键单击元素并应用“Break on…”>子树的修改。”这将在元素消失之前抛出调试器暂停，这将允许您以暂停状态与元素交互。

#2

An alternative method in Chrome:

Chrome的另一种方法:

While the element you want is displayed, press F8 (or Ctrl+/). This will break script execution while freezing the DOM exactly as it is.

当显示您想要的元素时，按F8(或按Ctrl+/)。这将打破脚本执行，同时冻结DOM。

From there you can use Ctrl+Shift+C to select the fleeting element.

您可以使用Ctrl+Shift+C选择稍纵即逝的元素。

#3

I am using chrome on Mac there I've followed above steps but I'll try to explain a bit more:

我在Mac电脑上使用chrome，我已经按照上面的步骤做了，但是我会试着解释更多:

Right click and go to inspect element.
右键单击并查看元素。
Go to sources tab.
去来源选项卡。
Then hover on the element.
然后悬停在元素上。
Then using keyboard F8 Command(Window) \. It will pause the screen in a static state and the element won't disappear on hover out.
然后使用键盘F8命令(窗口)\。它将在静态状态下暂停屏幕，元素不会在悬停时消失。

#4

In Firebug there are different solutions for this:

在Firebug中有不同的解决方案:

You can use Break On Mutate inside the HTML panel. (with this you'll also be able to find out which element it is)
您可以在HTML面板中使用Break On Mutate。(有了它，您还可以知道它是哪个元素)
You can right-click the element and choose Inspect Element with Firebug
您可以右键单击该元素并使用Firebug选择Inspect元素

Also you may want to follow issue 551, which asks for a way to temporarily block specific events.

您可能还想关注第551期，它要求提供一种暂时阻止特定事件的方法。

Edit:

编辑:

To find out which element it is you can also enable the HTML panel options Highlight Changes, Expand Changes and Scroll Changes Into View to make the element visible inside the HTML panel.

要找出是哪个元素，您还可以启用HTML面板选项突出显示更改，展开更改并将更改滚动到视图中，使该元素在HTML面板中可见。

Sebastian

塞巴斯蒂安。

#5

you can view the elements appearing and disappearing in the inspector under elements. If you navigate to the element when it is visible you should be able to see it disappear or see its css change when it status changes.

您可以在元素中查看在检查器中出现和消失的元素。如果您在元素可见时导航到它，您应该能够看到它消失或当它的状态改变时看到它的css更改。

This is possible with firebug in firefox or the built inspector in chrome.

firefox中的firebug或chrome中的内置检查器都可以实现这一点。

#1