How can I inspect disappearing element in a browser?

Question

How can I inspect an element which disappears when my mouse moves away?

Answer 1

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

Answer 2

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

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

Answer 3

There Could be Dom element and the controller functions fighting at to refresh the session. Running the application by "Start without debugging" helped in my case.

enter image description here

Answer 4

(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

Answer 5

In my case, I used Expand recursively option on google chrome:

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

Here is a demo:

Answer 6

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.

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