436

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.

Cœur
  • 32,421
  • 21
  • 173
  • 232
Abram
  • 34,472
  • 24
  • 121
  • 164
  • 7
    Try setting a breakpoint in your JavaScript immediately after the popup is shown (`debugger;`) – Hope4You Jul 29 '13 at 18:40
  • 5
    I use `window.setTimeout` to trigger `debugger` in 5 seconds, then hover over element and wait. – grimmdude Feb 28 '18 at 17:32
  • Hello, DevTools technical writer here. Can you all send me [MVCEs](https://stackoverflow.com/help/mcve) demonstrating the problem? As of 2019 we have a few tools that should do the trick ([event listener breakpoints](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints#event-listeners), [pseudo-class toggles](https://developers.google.com/web/tools/chrome-devtools/css/reference#pseudo-class)) but I can't provide a detailed answer until I can reproduce your situation. – Kayce Basques May 10 '19 at 16:57
  • [You can found other solution here](https://stackoverflow.com/a/58207769/2404670) for Chrome & Firefox – Muhammed Abdelfattah Oct 02 '19 at 19:04
  • @KayceBasques Here's an example: https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/ Click on the dropdown list to open it, then try inspecting the list content popover in the Elements view. – RMorrisey Mar 26 '20 at 19:31

6 Answers6

764

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
Abram
  • 34,472
  • 24
  • 121
  • 164
  • 10
    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 Jun 24 '14 at 15:18
  • 1
    I needed this while my mouse was pressed. Didn't work because I had to press my mouse which de-focused the console. So I added a breakpoint on mouseout which worked, although I had to resume (also F8) a few times until it triggered on the correct element. A bit wonky, but useful! – Radley Sustaire Feb 08 '15 at 05:35
  • I would assume this would work on a mac as long as you're using chrome... Perhaps you're getting hung up on the keyboard shortcuts? https://developer.chrome.com/devtools/docs/shortcuts – Abram May 14 '15 at 14:04
  • 30
    If the DOM element uses the [focusout](http://api.jquery.com/focusout) event to hide you have no chance to hit F8! – Marcel Aug 24 '15 at 14:26
  • 2
    @Dean to trigger F8 you need to use `fn`! – mik01aj Aug 25 '15 at 10:01
  • 11
    For more info, what `F8` shortcut does is actually pause the debugger(script execution). And `ctrl + \ ` also works. (`cmd + \ ` in MacOS). – LeOn - Han Li May 16 '17 at 18:57
  • 1
    Or you can press `F8` twice – Sam Denty Jun 24 '17 at 00:03
  • 3
    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 Sep 27 '17 at 09:40
  • Good to know: It's not working when you open the dev console in a new window. – kenny Sep 27 '17 at 12:48
  • 2
    I'm on Chrome 74 on Mojave and the opposite of this is actually true (you *have* to click on the page first before F8): "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" – celwell Jul 30 '19 at 17:50
  • I just retested on Chrome Version 76.0.3809.100 (Official Build) (64-bit)... also on Mojave, and it still seems to work as described. – Abram Aug 13 '19 at 13:53
  • 1
    The freakin best answer I've seen since before this summer. Thank you SO much @Abram – mraxus Aug 29 '19 at 12:15
  • Did not work for me when trying to inspect an autocomplete React component. The setTimeout() approach mentioned below worked, however. I have no idea why, to be honest. – waldgeist Sep 27 '19 at 13:59
  • @waldgeist I also had trouble with a React Select component which showed an artifact only with `clearable={false} searchable={false}`. However, it disappears on F8, on `setTimeout` and even if I use the `setTimeout` approach but with throwing and catching an error instead of `debugger`. – GuiRitter Dec 23 '19 at 18:27
  • it didn't work, as soon as you press f8 and start the debugger autocomplete popup dsappears – Muhammad Umer Feb 10 '20 at 16:48
321

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.

Community
  • 1
  • 1
Brad Parks
  • 54,283
  • 54
  • 221
  • 287
  • 7
    i respect that you paid proper respect to frzsombor's answer. nice. – Jeremy Moritz Sep 04 '15 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 Sep 11 '15 at 15:38
  • 10
    Abram's F8 solution did not work for me. This one did. Thanks! – Ralf Oct 18 '16 at 15:25
  • 3
    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 Apr 24 '17 at 14:16
  • 2
    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 Aug 08 '19 at 19:56
81

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.

frzsombor
  • 1,602
  • 17
  • 34
  • 11
    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 Jan 23 '15 at 19:13
  • 5
    I think you should add this as an answer, because this solution is not just better than mine, but better than all of the others here. Really nice! – frzsombor Feb 11 '15 at 10:47
  • I don't have f8 on my keyboard, this answer saved me, thanks – Dmitriy Jan 11 '21 at 16:07
43
  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.
Adrian Enriquez
  • 7,236
  • 7
  • 39
  • 62
16

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

Leah Huyghe
  • 257
  • 3
  • 15
1

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

ROOT
  • 10,339
  • 5
  • 24
  • 40
Vincent Tang
  • 2,648
  • 3
  • 28
  • 49