Freeze screen in chrome debugger / DevTools panel for popover inspection?

Question

I'm using the chrome inspector to try and analyze the z-index of a twitter bootstrap popover, and finding it extremely frustrating...

Is there a way to freeze the popover (while shown) so that I can assess and modify the associated CSS?

Placing a fixed 'hover' on the associated link does not cause the popover to appear.

Answer 1

Got it working. Here was my procedure:

1. Browse to the desired page
2. Open the dev console - F12 on Windows/Linux or option + ⌘ + J on macOS
3. Select the Sources tab in chrome inspector
4. In the web browser window, hover over the desired element to initiate the popover
5. Hit F8 on Windows/Linux (or fn + F8 on macOS) while the popover is showing. If you have clicked anywhere on the actual page F8 will do nothing. Your last click needs to be somewhere in the inspector, like the sources tab
6. Go to the Elements tab in inspector
7. Find your popover (it will be nested in the trigger element's HTML)
8. Have fun modifying the CSS

Answer 2

To be able to inspect any element do the following. This should work even if it's hard to duplicate the hover state:

• Run the following javascript in the console. This will break into the debugger in 5 seconds.

  setTimeout(function(){debugger;}, 5000)

• Go show your element (by hovering or however) and wait until Chrome breaks into the Debugger.

• Now click on the Elements tab in the Chrome Inspector, and you can look for your element there.
• You may also be able to click on the Find Element icon (looks like a magnifying glass) and Chrome will let you go and inspect and find your element on the page by right clicking on it, then choosing Inspect Element

Note that this approach is a slight variation to this other great answer on this page.