Freeze Screen in Chrome Debugger/Devtools Panel For Popover Inspection

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

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

Is it possible to freeze the DOM in browser for drag debugging?

Thx to @wOxxOm for the hint in the comments. Yes, it should be possible to set breakpoints for e.g. drag and dragstart events.

The problem was those breakpoints did not worked. Only dragstart worked in Firefox for me, but it was to early for my DOM debugging. But I got it working using the keyup event in Firefox. I dragged the element and then I hit the key and then breakpoint was triggered.

How do you inspect the web inspector in Chrome?

Follow these easy steps!

1. Press Command+Option+i (Ctrl+Shift+i on Windows) to open DevTools.

2. Make sure that the developer tools are undocked into a new window. You may have to undock from the menu:

3. Press Command+Option+i again on this new window.

4. That will open the DevTools on the DevTools.

• You can redock the page's DevTools if you want.

1. If it's not already, select Elements — it's the first icon at the top of the inspector.

---

A little beyond the scope of your question, but still valid in understanding why you're experiencing your problem can be found by understanding how Chrome Developer Tools: Remote Debugging works.

---

Related Topics