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

How can I inspect disappearing element in a browser?

提问by lukas.pukenis

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.

在控制台内运行 jQuery 选择器，$('*:contains("some text")')但没有任何运气，主要是因为该元素未隐藏，但可能已从 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-> mousedownin Chrome. After that I clicked the element I wanted to inspect and inside Scope VariablesI saw some useful directions.

我在事件断点方面取得了成功。具体来说 - 在我的情况下是 mousedown。只需Sources-> Event Listener Breakpoints-> Mouse-> mousedown在 Chrome 中访问即可。之后我点击了我想检查的元素，在里面Scope Variables我看到了一些有用的说明。

回答by arxpoetica

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

（此答案仅适用于 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.

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

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

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

回答by Joseph Tinoco

An alternative method in Chrome:

Chrome 中的另一种方法：

• Open devTools (F12).
• Select the "Sources" tab.
• While the element you want is displayed, press F8 (or Ctrl+/). This will break script executionand "freeze" the DOM exactly as it is displayed.
• From this point, use Ctrl+Shift+C to select the element.

• 打开开发者工具 (F12)。
• 选择“来源”选项卡。
• 在显示所需元素时，按 F8（或 Ctrl+/）。这将中断脚本执行并完全按照显示的方式“冻结”DOM。
• 从这一点开始，使用 Ctrl+Shift+C 选择元素。

回答by Mojtaba

1. Open console
2. Type in setTimeout(()=>{debugger;},5000);
3. Press Enter

1. 打开控制台
2. 输入 setTimeout(()=>{debugger;},5000);
3. 按 Enter

Now you have 5 seconds to make your element appears. Once it appeared, wait until the debugger hits. As long as you don't resume, you can play with your element and it won't disappear.

现在您有 5 秒钟的时间让您的元素出现。一旦出现，请等待调试器命中。只要你不恢复，你可以玩你的元素，它不会消失。

回答by Black Mamba

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

我在 Mac 上使用 chrome 我已经按照上述步骤操作，但我会尝试解释更多：

1. Right click and go to inspect element.
2. Go to sources tab.
3. Then hover on the element.
4. Then using keyboard F8orCommand(Window) \. It will pause the screen in a static state and the element won't disappear on hover out.

1. 右键单击并转到检查元素。
2. 转到来源选项卡。
3. 然后将鼠标悬停在元素上。
4. 然后使用键盘F8或Command(Window) \. 它将在静态状态下暂停屏幕，并且元素不会在悬停时消失。

回答by Raja David

In my case, I used Expand recursivelyoption on google chrome:

就我而言，我在 google chrome 上使用了Expand recursively选项：

The steps are:

步骤是：

1. Inspect the dropdown field
2. Find the dynamic DOM (the purple highlight)
3. Right-mouse click on that dynamic DOM
4. Choose Expand recursively:
5. We can see all elements are there

1. 检查下拉字段
2. 找到动态 DOM（紫色高亮部分）
3. 鼠标右键单击该动态 DOM
4. 选择扩展递归：
5. 我们可以看到所有元素都在那里

Here is a demo:

这是一个演示：

回答by Sebastian Zartner

In Firebug there are different solutions for this:

在 Firebug 中，对此有不同的解决方案：

1. You can use Break On Mutateinside the HTML panel. (with this you'll also be able to find out which element it is)
2. You can right-click the element and choose Inspect Element with Firebug

1. 您可以在 HTML 面板中使用Break On Mutate。（有了这个，您还可以找出它是哪个元素）
2. 您可以右键单击该元素并选择Inspect Element with Firebug

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

此外，您可能想要关注issue 551，它要求一种暂时阻止特定事件的方法。

Edit:

编辑：

To find out which element it is you can also enable the HTML panel optionsHighlight Changes, Expand Changesand Scroll Changes Into Viewto make the element visible inside the HTML panel.

要找出它是哪个元素，您还可以启用HTML 面板选项Highlight Changes、Expand Changes和Scroll Changes Into View以使元素在 HTML 面板内可见。

Sebastian

塞巴斯蒂安

回答by Vivekanand Panda

Hover over the element with your mouse and press F8 (this in Chrome) to pause the script execution. The hover state will remain in visible to you.

将鼠标悬停在该元素上并按 F8（在 Chrome 中为该选项）以暂停脚本执行。悬停状态将保持对您可见。

It take you to the sources tab. Go back to Elements tab. This time code will not disapper.

它会将您带到“来源”选项卡。返回元素选项卡。这个时间码不会消失。

回答by matpol

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 中的内置检查器来实现。

回答by Hani Yassine

i had the same problem but i use Firefox it disappear as soon as i open inspect element found a solution: open the 4 dashes(settings) go to web developer > Debugger and immediately press F8 which is the shortcut for the pause that stop the script before it kick and detect that you opened the developers tools

我遇到了同样的问题，但我使用 Firefox 它会在我打开检查元素后立即消失找到解决方案：打开 4 个破折号（设置）转到 Web 开发人员 > 调试器并立即按 F8，这是停止脚本的暂停的快捷方式在它启动并检测到您打开了开发人员工具之前