Jo Liss
Jo Liss

Reputation: 33114

Chrome devtools: Drop into debugger without switching to Sources tab

If I put the debugger statement in my JavaScript source with the Chrome devtools open, it'll stop execution so I can interactively explore the current context from the console. It's really awesome.

But unfortunately it will also switch to the Sources tab and display the line where the debugger statement happened. Most of the time, I want to type JavaScript commands, so I have to manually switch back to the Console tab.

Can I avoid the tab-switching and stay in the Console tab?

Or am I using it wrong?

Upvotes: 35

Views: 9540

Answers (3)

Nick Farina
Nick Farina

Reputation: 4860

Looks like Chrome added a preference for this in the intervening 9 years: https://stackoverflow.com/a/69216922/66673

Quoting that answer:

I had the same issue and it was driving me nuts! The way I managed it to stop switching was to go to into the DevTools settings -> Preferences.

Under Sources options, uncheck Focus Sources panel when triggering a breakpoint.

Upvotes: 30

Shirantha Madusanka
Shirantha Madusanka

Reputation: 1695

Right-click on the source-tab and select 'move to bottom'. enter image description here

Upvotes: 33

MaxArt
MaxArt

Reputation: 22637

There's a reason for that - and is that whenever the code has stopped, because of a breakpoint or a debugger statement, you'd usually want to actually see where the execution has stopped. So, the developer tools switches to the Scripts/Sources tab, and this is a common behaviour among the major browsers, that may also show the local variables, the call stack and so on.

The best thing you can do is to keep the console frame always open, so you're ready to work. Just press Esc or click on the second icon on the lower left corner. That's what I usually do.

Switch to the Console tab when you expect to get a large response from the command you type.

Upvotes: -2

Related Questions