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

CssGoogle ChromeGoogle Chrome-Devtools

Css Problem Overview

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.

Css Solutions

Solution 1 - Css

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

Solution 2 - Css

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.

Solution 3 - Css

UPDATE: As Brad Parks wrote in his comment there is a much better and easier solution with only one line of JS code:

> run setTimeout(function(){debugger;},5000);, then go show your element and wait until it breaks into the Debugger

Original answer:

I just had the same problem, and I think I found an "universal" solution. (assuming the site uses jQuery)
Hope it helps someone!

  1. Go to elements tab in inspector
  2. Right click <body> and click "Edit as HTML"
  3. Add the following element after <body> then press Ctrl+Enter:
    <div id="debugFreeze" data-rand="0"></div>
  4. Right click this new element, and select "Break on..." -> "Attributes modifications"
  5. Now go to Console view and run the following command:
    setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
  6. Now go back to the browser window and you have 5 seconds to find your element and click/hover/focus/etc it, before the breakpoint will be hit and the browser will "freeze".
  7. Now you can inspect your clicked/hovered/focused/etc element in peace.

Of course you can modify the javascript and the timing, if you get the idea.

Solution 4 - Css

  1. Right click anywhere inside Elements Tab
  2. Choose Breakon... > subtree modifications
  3. Trigger the popup you want to see and it will freeze if it see changes in the DOM
  4. If you still don't see the popup, click Step over the next function(F10) button beside Resume(F8) in the upper top center of the chrome until you freeze the popup you want to see.

Solution 5 - Css

I found that this works really well in Chrome.

Right click on the element that you'd like to inspect, then click Force Element State > Hover. Screenshot attached.

Force element state

Solution 6 - Css

I tried the other solutions here, they work but I'm lazy so this is my solution

  1. hover over the element to trigger expanded state
  2. ctrl+shift+c
  3. hover over element again
  4. right click
  5. navigate to the debugger

by right clicking it no longer registers mouse event since a context menu pops up, so you can move the mouse away safely

Solution 7 - Css

Previously My Chrome Freeze feature was not working by pressing f8 shortcut Key , i use this walk around and goto Source Tab and just clicked on Pause / play on Script Execution button in right panel of chrome Dev tools in Source Tab, My short cut key that got fixed and started to work from then, Really thank full , Fixed my problem

Categories
Recommended Css Solutions
Recommended Google Chrome Solutions
Recommended Google Chrome-Devtools Solutions

Previous Solution:

How can I get my Twitter Bootstrap buttons to right align?

Twitter BootstrapTwitter Bootstrap-3Bootstrap 4Twitter Bootstrap-2

Next Solution:

Aren't promises just callbacks?

JavascriptCallbackPromiseQBluebird

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAbramView Question on Stackoverflow
Solution 1 - CssAbramView Answer on Stackoverflow
Solution 2 - CssBrad ParksView Answer on Stackoverflow
Solution 3 - CssfrzsomborView Answer on Stackoverflow
Solution 4 - CssAdrian EnriquezView Answer on Stackoverflow
Solution 5 - CssLeah HuygheView Answer on Stackoverflow
Solution 6 - CssVincent TangView Answer on Stackoverflow
Solution 7 - Cssuser2841183View Answer on Stackoverflow