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.

Solution 1

(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

Solution 2

An alternative method in Chrome:

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

Solution 3

1. Open console
2. Type in setTimeout(()=>{debugger;},5000);
3. Press 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.

---

Useful tip to avoid repeating those steps above every time:

add this as a bookmarklet:

1. Bookmark any page
2. Edit this new bookmark
3. Replace the URL/location with: javascript:(function(){setTimeout(()=>{debugger;},5000);})();

Next time you wish to use this, just click/tap this bookmark.

Solution 4

Verified in 2022

Do the following:

1. Open the console and navigate to Elements tab
2. Type command + shift + P (OSX) or control + shift + P (Windows)
3. Type the word focused
4. Select Emulate a focused page from the the menu

Now clicking around in the console will not close the element.

Solution 5

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.

View more solutions

Comments

[HMR]

Your question helped although I did not get on the breakpoint using the sources, I executed the following script in the console: document.body.addEventListener('mouseup',function(){ debugger; }) That got me in a break and I could inspect the elements created.

[araisbec]

You rock. Had this exact issue with a React-Select control, where I couldn't view the HTML of the list items because the subtree would delete any time I'd click away. Needed the item ID's in order to automate clicks using Selenium. Thanks!

[lukas.pukenis]

Yes. I have stated that changes happen too fast in DOM and page modifies DOM heavily so it's really not a solution as I am not able distinguish my needed elements from a bunch of modifications everywhere :)

[lukas.pukenis]

Chrome as well has decent inspector. The problem is - right click on element makes it disappear in my case. Chrome also has Break on DOM mutate. The problem with this - I don't know which element it is as it's dynamically generated

[matpol]

you could try tracing what is going on using console.log e.g. at the beginning of the function you are trying to check you can view object css etc. Or slow down the changes until you know they work properly and then change the speed to what you want it to be e.g. hide('slow') in jquery

[lukas.pukenis]

Problem is - it's not my own codebase, it's a legacy, big, old, codebase where simple search through the files gives me nothing.. :)

[matpol]

you can view what files are being used by the page in the inspector too. I would go through removing them until it breaks then look in the file that broke it and go from there. You can always search the actual files too.

[lukas.pukenis]

Great point. Done that too. Found obfuscated JS code. Lots of it. It's no a project of mine, nor the original source files are present. So pretty much these methods simply fail. Prettyfind didn't produce any sensible results aswell. Seems like JS was generated with Google Closure tool

[matpol]

does this help: madxperts.com/2011/07/23/…

[lukas.pukenis]

Chrome has built in prettyfier. Tried that too, but the code seems to be very optimized and advanced(read: unreadable). What I would like - maybe disable mouse events. For example when I right click on the disappearing element, it should let me inspect the element but not report the page about the event

[matpol]

how about this:stackoverflow.com/questions/10213703/…

[lukas.pukenis]

Thanks for this URL. I have also found my element with mouse breakpoints(mousedown). So this helps too :)

[Sebastian Zartner]

I just edited my answer to give a hint how to get to know which element it is.

[Dylan Pierce]

To avoid some possible confusion - the debugger will pause as you're triggering the event, a.k.a. typing in a place name. When the screen pauses just hit the play button on the DOM itself and you'll be able to trigger the event.

[Daniel Loiterton]

Perfect!! This does exactly what I wanted

[hbulens]

I noticed this only works when you have the developer tools already opened in the 'Sources' tab.

[X.Creates]

it does freeze the code from execution but the element still disappeared (I'm using React).

[Roger Veciana]

My Chrome says F8 or Crtl + \ (not Crtl + /). Also, the Crtl + \ doesn't work in my case...

[Michael]

This doesn't work if the page has captured the right-click and does it's own thing on right-click.

[Michael]

This does not work on Google video control pop-ups... the control appears to fade from view as soon as you hit the key, and has completely faded out before the freeze occurs.

[half of a glazier]

This doesn't work for the first of two dialogs in the same container

[half of a glazier]

This isn't working at all... the element still disappears. I'm using Vue - maybe it doesn't align with Chrome developer tools?

[half of a glazier]

Thank you, thank you, for the detailed instructions! After a show of extreme dexterity - clicking a button, pressing Ctr + Shift + C, moving the mouse to hover over the element, and pressing F8 within the space of a second and a half - I finally got my element in inspectable mode

[arxpoetica]

@Still_learning Can you explain what you mean by "two dialogs in the same container."

[half of a glazier]

<v-container><v-dialog></v-dialog><v-dialog></v-dialog></v-c‌​ontainer> - in my case the first dialog only displays until the data arrives from the db, approx 1 second

[Newteq Developer]

This does not seem to work anymore - my current chrome version is : 80.0.3987.149. I remember this use to work about a year ago 😢

[warmwhisky]

This is quickest and most stable way to debug disappearing elements ^

[Sam]

Didn't work for me for react-day-picker's <DayPickerInput />

[Louis]

This is really good! I am mad I didn't think about this

[philomath]

@Mojtaba Great answer

[Grant Birchmeier]

My component disappears as soon as I hit F8, before the pause takes hold.

[Grant Birchmeier]

This is the only solution that worked for me. (The "F8" solve in multiple other answers here did not work.)

[Rajan Domala]

You are awesome !

[SeaWarrior404]

This is the best way to handle not just such "disappearing elements" but also to inspect dom changes which in turn will lead you to the problematic section. Just ensure that you apply this on the deepest section where you know for sure the issue lies

[herickmota]

This worked for me. Thanks man!!!

[Drew]

Absolutely awesome - thanks @dipole_moment - this is why I find myself scrolling to the bottom answers first in stackoverflow now - better current solutions

[Carey Estes]

Absolute genius!

[Josh Kelley]

As an alternative to opening the "run command" pop-up box with Command-Shift-P or Ctrl-Shift-P, you can go under the Dev Tools' three-dots menu, under More Tools, and click Rendering.