How can I inspect disappearing element in a browser?

by

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

enter image description here

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

enter image description here

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

More Related Contents:

  1. Breakpoint on property change
  2. Why are regular expressions taking the helm in my JavaScript, and how do I insist “this is a string”? [closed]
  3. Is it possible to display a custom message in the beforeunload popup?
  4. Find out whether Chrome console is open
  5. new Date() is working in Chrome but not Firefox
  6. Detecting the onload event of a window opened with window.open
  7. How can I set default homepage in FF and Chrome via javascript?
  8. style.display=’none’ doesn’t work on option tags in chrome, but it does in firefox
  9. Cryptic “Script Error.” reported in Javascript in Chrome and Firefox
  10. How to getting browser current locale preference using javascript?
  11. JavaScript Time Zone is wrong for past Daylight Saving Time transition rules
  12. How JavaScript closures are garbage collected
  13. Does execCommand SaveAs work in Firefox?
  14. Open IE browser in Firefox/Chrome page
  15. Animated gif only loops once in Chrome and Firefox
  16. What happens to code after a javascript redirect (setting window.location.href)?
  17. Add to browser favorites/bookmarks from JavaScript but for all browsers (mine doesn’t work in Chrome)?
  18. Chrome – Fetch API cannot load file. How to workaround?
  19. What is the source of the double-dollar sign selector query function in Chrome/Firefox?
  20. Firebug says “No Javascript on this page”, even though JavaScript does exist on the page
  21. Why is a function declaration within a condition block hoisted to function scope in Chrome but not Firefox?
  22. Get cursor or text position in pixels for input element
  23. Why are function declarations handled differently in different browsers?
  24. How to get result of console.trace() as string in javascript with chrome or firefox?
  25. Silence net::ERR_CONNECTION_REFUSED
  26. How to detect if user has enabled full screen in browser
  27. How to use “segments” mode at SourceBuffer of MediaSource to render same result at Chomium, Chorme and Firefox?
  28. chrome Pop-up blocker when to re-check after allowing page
  29. Chrome won’t play WebAudio getUserMedia via WebRTC/Peer.js
  30. Error: “Access to restricted URI denied”

Leave a Comment