Ignore clicks in the Chrome Dev Tools pane

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.


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.

enter image description here

Hope this helps. Cheers 🥳