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.
This question is related to
css
google-chrome
google-chrome-devtools
Got it working. Here was my procedure:
Sources
tab in chrome inspectorElements
tab in inspectorStep 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. 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!
<body>
and click "Edit as HTML"<body>
then press Ctrl+Enter: <div id="debugFreeze" data-rand="0"></div>
setTimeout(function(){$("#debugFreeze").attr("data-rand",Math.random())},5000);
Of course you can modify the javascript and the timing, if you get the idea.
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.
Elements
tab in the Chrome Inspector, and you can look for your element there. 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.
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.
I tried the other solutions here, they work but I'm lazy so this is my solution
by right clicking it no longer registers mouse event since a context menu pops up, so you can move the mouse away safely
Source: Stackoverflow.com