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.)

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.

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 🥳