612

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.

Improve this question
5

15 Answers 15

Reset to default
964

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
Improve this answer
17
  • 13
    This workflow gave me a short, useful introduction to the breakpoint debugger and helped isolate a menu that was difficult to style, as it disappeared on Console click.
    – Trevor Pierce
    Commented Jun 24, 2014 at 15:18
  • 51
    If the DOM element uses the focusout event to hide you have no chance to hit F8!
    – Marcel
    Commented Aug 24, 2015 at 14:26
  • 3
    @Dean to trigger F8 you need to use fn!
    – mik01aj
    Commented Aug 25, 2015 at 10:01
  • 16
    For more info, what F8 shortcut does is actually pause the debugger(script execution). And ctrl + \ also works. (cmd + \ in MacOS).
    – LeOn - Han Li
    Commented May 16, 2017 at 18:57
  • 6
    It's great fun refreshing the page and trying to fn+f8 at just the right moment. They should release it as a game on Steam.
    – Matt Fletcher
    Commented Sep 27, 2017 at 9:40
557

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.

Improve this answer
9
  • 10
    i respect that you paid proper respect to frzsombor's answer. nice.
    – Jeremy Moritz
    Commented Sep 4, 2015 at 19:10
  • 5
    This is what I needed, as the functionality was due to a DOM element getting added on js Focus, and removed on blur, which always happens when you switch to the dev tools.
    – trudesign
    Commented Sep 11, 2015 at 15:38
  • 23
    Abram's F8 solution did not work for me. This one did. Thanks!
    – Ralf
    Commented Oct 18, 2016 at 15:25
  • 9
    Thx. I made a bookmark with title: ❚❚, address: javascript:debugger;. F8 works, but for those who prefer to use mouse this might be more convenient.
    – Tymek
    Commented Apr 24, 2017 at 14:16
  • 5
    As others have commented the F8 answer was not working for me, and was driving me completely nuts! This works like a charm. Thank you!
    – DoYouEvenCodeBro
    Commented Aug 8, 2019 at 19:56
142

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)

  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.

Improve this answer
4
  • 22
    Hey! Great idea... you don't even need to add the extra div though... Just run this javascript instead setTimeout(function(){debugger;}, 5000);, then go show your element and wait until it breaks into the Debugger. Then click on the "Elements" tab in the Chrome Inspector, and you can look for your element there. You may also abe 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".
    – Brad Parks
    Commented Jan 23, 2015 at 19:13
  • I don't have f8 on my keyboard, this answer saved me, thanks
    – Dmitriy
    Commented Jan 11, 2021 at 16:07
  • Thanks this helped me, I added the following and did the trick: onclick="setTimeout(function(){debugger;},5000);"
    – AL - Lil Hunk
    Commented Jan 31, 2022 at 19:31
  • this is one of the most genius ideas ever
    – Phạm Huy Phát
    Commented Aug 30, 2023 at 3:27
63
  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.
Improve this answer
0
23

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

Improve this answer
1
  • 9
    It will work only if the popover is triggered by css.
    – mik01aj
    Commented Aug 25, 2015 at 10:29
7

I recently ran into this issue and pressing F8 solution didn't work for me. Here's how I froze the hover element.

  1. Right click the tag with the hover in Chrome and select it in Elements tab.
  2. On the right side window, select Event Listeners
  3. Expand the mouseout event
  4. click the remove button shown there.
  5. Now if you hover over your element, it will trigger mouseover event but cannot trigger mouseout when your curser leave the element, since we deleted that.

Hope this helps.enter image description here

Improve this answer
5

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

Improve this answer
1
  • Shame. That doesn't work, nor F8 either
    – velkoon
    Commented Sep 26, 2022 at 22:42
4

Fn+F12-->3 dots in inspector right side-->more tools -->Rendering--> select Emulate a focused page

Improve this answer
4
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Community Bot
    Commented Feb 26 at 11:24
  • What the heck... How can you earn 0 votes while only you provided the correct answer here? I tried every solution provided here with my curiosity and this is the perfect solution.
    – wonsuc
    Commented Mar 26 at 8:34
  • I've had this issue a 1000 times in the past. This answers once and for all got rid of this problem for me.
    – quenn
    Commented Apr 23 at 13:21
  • This should be the accepted answer. Straight. On. Point.
    – klevisx
    Commented Jul 8 at 14:21
3

You can use Bookmarklets to run a script to enter debugging mode (and thus freeze the viewport including all active states. It's the easiest method to inspect elements hidden behind a state if you ask me.

  1. Add a bookmark to your browser.
  2. Name it Freeze for example
  3. In the URL field, enter javascript: setTimeout(()=>{debugger}, 2000)
  4. Open Dev Tools (⌘ + Shift + C is my go to or F12)
  5. Click the Freeze bookmark
  6. Trigger the hover/active state in the view port as you normally would before 2s elapse
  7. Your view port is now frozen in the current state and you can inspect your previously hidden elements

Obviously you can change the interval until the debugger activates. Hope this helps!

Improve this answer
2

None of the solutions worked for me, only the one as described on : https://developer.chrome.com/docs/devtools/javascript/disable/

for Linux ( for Mac use command instead of comtrol ):

  • Open developer tools ( ctrl + shift + I )
  • Run command window ( ctrl + shift + P )
  • Start typing javascript and select disable javascript

screenshot of instructions:

enter image description here

Improve this answer
0

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

Improve this answer
0

I found another way to do this.

If your element is shown by a click on a button then hides when focus is removed, just right-click and copy the button's selector, then go to the Elements panel in dev tools and hit Esc to open the console at the same time.

Then right-click again on the button and "inspect" to reveal that part of the HTML in the document.

Go back to your console and manually trigger the click event using: document.querySelector('#yourButtonSelector').click()

Then it goes into the desired state while your focus is on DevTools, and you can click around the Elements panel without causing it to disappear. Hope this helps!

Improve this answer
1
  • Dude, you can just use $0.
    – wonsuc
    Commented Mar 26 at 8:27
0

Based on great idea of @frzsombor, I have written a chrome extension that help you freeze the DOM instantly for debugging and validating purpose. Under the hood, it call debugger command from chrome extension instead of waiting for the timeout in console to be triggered right at the moment / the state you want

https://chrome.google.com/webstore/detail/freeze-dom/onekmnelbichmlnmkecckkjjljifhefg

How to use it:

  • Open DevTools Panel
  • Right Click -> select 'Freeze DOM' or Press Cmd + Shift + Y (on Mac) / Cmd + Shift + Y (on Window, Ubuntu)
Improve this answer
0

You can enable the Emulate a focused page setting in the Elements panel > Styles tab.

This setting is available the Style tab since the recent Chrome 123 updates.

The popover show/hide in Bootstrap is determine by the page's focus state (document.hasFocus()), not the element's hover state.

When you inspect the element with DevTools open, the focus is shifted to DevTools, which considered as a separate page. Therefore, we need to "fake" (emulate) the focus back to the page. There's a detailed explanation in this video.

emulate a focused page

Improve this answer
0

Freeze screen follow the following steps 1)Open DevTools Panel: Use F12 (Windows/Linux) or Option + ⌘ + J (macOS) to open Chrome DevTools. Alternatively, right-click on an element and select “Inspect.”

2)Click on Console: Navigate to the Console tab within DevTools.

3)Allow Pasting: Type “Allow pasting” in the console to enable pasting content into input fields.

4)Set Debugger Breakpoint: Enter setTimeout(function() { debugger; }, 5000); to pause execution after 5 seconds for inspection and debugging.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.