How can I inspect disappearing element in a browser?

Question

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.

Answer 1

(This answer only applies to Chrome Developer Tools.)

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.

Answer 2

An alternative method in 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.

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

Answer 3

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 4

In Firebug there are different solutions for this:

1. You can use Break On Mutate inside 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

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

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.

Sebastian

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

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.

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

Answer 7

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.

Answer 8

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