“Inspect” a hover element?

by

If the hover is triggered by JS, just pause script execution via the keyboard. This is a much simpler way of freezing the DOM than the other answers suggest.

Here’s how you do it in Chrome. I’m sure Firefox has an equivalent procedure:

  1. Open up Developer Tools and go to Sources.

  2. Note the shortcut to pause script execution—F8.

    Pause script execution

  3. Interact with the UI to get the element to appear.

  4. Hit F8.
  5. Now you can move your mouse around, inspect the DOM, whatever. The element will stay there.

More Related Contents:

  1. Disabling Chrome cache for website development
  2. Chrome 84 Inspect element, find results not highlighted in yellow like before
  3. “CAUTION: provisional headers are shown” in Chrome debugger
  4. Is there a way to get the XPath in Google Chrome?
  5. Using Chrome’s Element Inspector in Print Preview Mode?
  6. How do you inspect the web inspector in Chrome?
  7. What does ==$0 (double equals dollar zero) mean in Chrome Developer Tools?
  8. See :hover state in Chrome Developer Tools
  9. What’s the difference between “Normal Reload”, “Hard Reload”, and “Empty Cache and Hard Reload” in Chrome?
  10. How to change chrome packaged app id Or Why do we need key field in the manifest.json?
  11. How to get Chrome to allow mixed content?
  12. Chrome stalls when making multiple requests to same resource?
  13. Automatically open Chrome developer tools when new tab/new window is opened
  14. Chrome DevTools Devices does not detect device when plugged in
  15. How to reposition Chrome Developer Tools
  16. Bizarre Error in Chrome Developer Console – Failed to load resource: net::ERR_CACHE_MISS
  17. Making HTTP Requests using Chrome Developer tools
  18. Chrome: Source of Post Data?
  19. How to search all loaded scripts in Chrome Developer Tools?
  20. Remote Debugging for Chrome iOS (and Safari)
  21. Chrome not showing OPTIONS requests in Network tab
  22. Multiple URLs copy in Sources/Network tab
  23. Understanding Chrome network log “Stalled” state
  24. Chrome developer tools workspace mappings
  25. Chrome Dev Tools: How to trace network for a link that opens a new tab?
  26. How to block a URL in Chrome’s developer tools network monitor
  27. Chrome Console SameSite Cookie Attribute Warning
  28. Chrome remote debugging doesn’t work with IP
  29. Chrome CORS error on request to localhost dev server from remote site
  30. chrome.identity User Authentication in a Chrome Extension

Leave a Comment