如何检查浏览器中消失的元素? [英] How can I inspect disappearing element in a browser?

问题描述

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

我不知道它的 ID、类或任何东西，但想检查它.

我尝试过的解决方案:

在控制台内运行 jQuery 选择器 $('*:contains("some text")') 但没有任何运气，主要是因为该元素没有隐藏但可能从 DOM 树中删除.

手动检查 DOM 树的变化并没有给我什么，因为它似乎太快而无法注意到发生了什么变化.

成功:

我在事件断点方面取得了成功.具体来说 - 在我的情况下是 mousedown.只需转到 Sources->事件侦听器断点->鼠标->Chrome 中的 mousedown.之后，我点击了我想要检查的元素，在 Scope Variables 中我看到了一些有用的说明.

解决方案

(此答案仅适用于 Chrome 开发者工具.请参阅下面的更新.)

查找包含消失元素的元素.右键单击该元素并应用Break on..."子树修改."这将在元素消失之前引发调试器暂停，这将允许您与处于暂停状态的元素进行交互.

2019 年 10 月 22 日更新:随着 v.70 的发布，FireFox 似乎终于支持这种调试

2020 年 9 月 15 日更新:Chrome 有一个模拟聚焦页面"选项(您可以从 [⌘]+[P] 命令菜单或全局首选项中获取它)以满足这一确切需求.5 - h/t @sulco 推特

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.

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.

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

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.

解决方案

(This answer only applies to Chrome Developer Tools. See update below.)

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.

Update Oct 22 2019: with the release of v. 70, it looks like FireFox finally supports this kind of debugging 2 3:

Update Sep 15 2020: Chrome has an "Emulate a focused page" option (you can get it from the [⌘]+[P] Command Menu, or Global Preferences) for this exact need. 5 - h/t @sulco on Twitter

这篇关于如何检查浏览器中消失的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！