CODEWITHSUNDEEP
javascriptjquerygoogle-chromegoogle-chrome-devtools
vaindil
vaindil

Reputation: 7854

Ignore clicks in the Chrome Dev Tools pane

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

Upvotes: 23

Views: 9207

Answers (6)

SpicyCatGames
SpicyCatGames

Reputation: 1690

To improve upon IPat's answer,

Your code might have lots of uncaught exceptions. So you could use the following instead, and you won't have to set "Pause on uncaught exceptions"

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

Upvotes: 0

IPat
IPat

Reputation: 147

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)

Upvotes: 0

Patrick J.
Patrick J.

Reputation: 352

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)

Upvotes: 16

Jose Browne
Jose Browne

Reputation: 4632

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 🥳

Upvotes: 10

Vilmar Rodrigues Martins
Vilmar Rodrigues Martins

Reputation: 418

Press F12 > Go to Source > Press Pause scripts

Upvotes: 0

Prashant
Prashant

Reputation: 8040

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.

Upvotes: 20

Related Questions