CODEWITHSUNDEEP
google-chromeuser-interfacedebugginggoogle-chrome-devtools
ericslaw
ericslaw

Reputation: 921

How to hide Chrome "paused in debugger" overlay?

Some semi-recent update to Chrome now places an overlay on my webpage when paused at a breakpoint. I'm specifically trying to view the state of my page markup at this point, and the overlay is hiding exactly what I want to see!

Is there a way to turn off this markup?

Or is there a way to revert Chrome to a version that doesn't have this mis-feature?

Upvotes: 33

Views: 18702

Answers (3)

Amit Shahi
Amit Shahi

Reputation: 101

If you see "Paused in Debugger" popup on Chrome 90.0+, then make sure to enable this setting under Preferences -> Appearance in Chrome Dev Tool to disable the popup.

enter image description here

Upvotes: 3

István Ujj-Mészáros
István Ujj-Mészáros

Reputation: 3247

Now there is an option in Inspector's settings, just uncheck Disable paused state overlay: Go to Settings (F1), the Preferences tab (the first one) and it's the last option under Appearance (top left).

It is very usable with the setTimeout(function(){debugger;}, 5000); trick to inspect elements that are visible only on hover.

Upvotes: 35

hopper
hopper

Reputation: 13400

I've run into this same issue, and I discovered that if I switch to the "Elements" tab and enable the element inspector (the button in the lower right with the magnifying glass icon) then the overlay is hidden. As you might expect, when you disable the element inspector again the "paused in debugger" message comes back, so I usually just leave the inspector enabled while I'm stepping through the debugger.

It may not be intuitive, but at least it works. If there are any other alternatives, I'd love to hear them!

Upvotes: 6

Related Questions