Ignore clicks in the Chrome Dev Tools pane

Question

I'm trying to look at and alter the style of some elements that display on click and hide when anywhere else on the page is clicked (it's a modal popup). The problem is that clicking on the developer tools pane triggers the "click anywhere else" action, so the elements I'm trying to look at are being hidden.

How can I ignore clicks in the Chrome developer tools pane so the click action doesn't fire?

(Tagging jQuery and Javascript because I'm not sure if it's a problem with Chrome or if I need to load the script a different way.)

Favoritism

Answer 1

Ah, there is a nice trick for this.

Go to the Sources panel, and pause the script execution using "fn + F8" keyboard shortcut. (Hover over pause icon to see what the keyboard shortcut is for your OS)

Now use the element selector from top left corner of the dev tool to select the element of your choice and inspect its styles.

Gobo

Clever answer, but unfortunately this isn't currently working for me in Chrome. Maybe they changed something in the dev tools. – Unbar

Answer 2

Most of the time the freezing code execution using shortcut works. But just ran into a case where it didn't for some reason (maybe it's a CSS only hide/show 🤷🏽‍♂️).

Managed to get it working by finding the container the popover was being rendered into in the Elements Panel → Right-clicking on it → Selecting "Break on/subtree modifications

This should pause code execution on show/hide - giving you time to inspect.

Hope this helps. Cheers 🥳

Embankment

Actually found this more useful than pausing script execution wholesale. Thanks! – Laux

Answer 3

Although this post is very old - I struggled at the same position. PAUSE didn't help/work, but what you can do is:

Go to DevTools (F12) --> Console --> use SetTimeout-Method (e.g. 3seconds) - open your modal - and after the timeout the PAUSE triggers automatically.

setTimeout(() => {debugger;}, 3000)

Bonaventura

This is really smart and it working fine with me. – Martinmas

the best answer for me. I have an popup, which I want to inspect in elements, and every time I've clicked outside the popup, it unmounted from DOM. With this solution finally I could catch that popup in devtools Elements tab – Culch

Answer 4

Press F12 > Go to Source > Press Pause scripts

Decorum

Answer 5

For some reason, the debugger; call in Patricks suggested solution didn't work for me. However, the following variation of his solution worked for me:

Open the DevTools (F12) > Sources > Check "Pause on uncaught exceptions" within the breakpoints menu in the bottom left > Console > Run the following script and get everything ready for when it calls the debugger to pause:

setTimeout(() => {throw new Error()}, 3000)

Stifle