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

User · Answer

Right click anywhere inside Elements Tab Choose Breakon      subtree modifications Trigger the popup you want to see and it will freeze if it see changes in the DOM 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

User · Answer

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    Go to elements tab in inspector Right click  lt body gt  and click  Edit as HTML  Add the following element after  lt body gt  then press Ctrl Enter   lt div id  debugFreeze  data-rand  0  gt  lt  div gt  Right click this new element  and select  Break on     -   Attributes modifications  Now go to Console view and run the following command  setTimeout function       debugFreeze   attr  data-rand  Math random     5000   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   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

User · Answer

I tried the other solutions here  they work but I m lazy so this is my solution   hover over the element to trigger expanded state ctrl shift c hover over element again right click 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

User · Answer

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

User · Answer

Got it working  Here was my procedure    Browse to the desired page Open the dev console - F12 on Windows Linux or option       J on macOS Select the Sources tab in chrome inspector In the web browser window  hover over the desired element to initiate the popover 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 Go to the Elements tab in inspector Find your popover  it will be nested in the trigger element s HTML  Have fun modifying the CSS

User · Answer

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

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

Examples related to css

Examples related to google-chrome

Examples related to google-chrome-devtools