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

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 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.

Answer 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.

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