Never Pause Here! Undoing Breakpoints in Chrome Devtools

Right click the gutter and select “never pause here”

Did you know that you could right click on any line of Javascript code in Google Chrome Developer Tools, and select “Never Pause Here” to undo breakpoints at runtime? This is different from disabling a breakpoint. This actually forces code NOT to stop on a particular line.

It seems counterintuitive, but there are a couple of reasons this is really useful for those debugging sessions.

TL;DR Right click in the area where you’d normally set breakpoints, select “never pause here” and you can prevent the debugger from stopping on exceptions or debugger statements.

Misplaced Debugger Statement

Many Javascript programmers already know that you can use the keyword debugger in your code and it will stop execution on that line.

function doCountdown(){
    console.log('countdown!')
    for (var i=100; i>=0; i--){
        debugger;
        console.log(i);
    }
    console.log('blastoff!')    
}
doCountdown();

But check out the code above. If you want to continue to the line that prints “blastoff”, you need to resume execution with F8 a hundred times to continue past the block! Right click the line and “never pause here” will come to your rescue.

Continue When An Exception is Thrown

I usually like to leave exception breakpoints “on” when debugging my scripts.

But imagine you’re deep into debugging some code, and you keep hitting JS errors before you get back to the place you’re interested in. This can be annoying and ruin your train of thought.

Why not just fix the error?

Consider this real life example: Your marketing team forces you to include some [crappy] analytics code that occasionally errors out. You can either remove the code in dev mode, or work around it with “never debug here”.

Here’s the demonstration example:

function throwsErrorsOccasionally(){
    if (Math.random() < .5){ //math.random returns float btw 0 and 1
        callSomeFunctionThatDoesntExist(); //ERROR!
    }
}
function someFunctionToDebug(){
    //...
}
throwsErrorsOccasionally();
someFunctionToDebug();

I really want to debug the code in someFunctionToDebug but I’m constantly interrupted by callSomeFunctionThatDoesntExist. Use “Never Pause Here” and you’re done!

Want more tips like this? Try my 3 hour video class about Chrome Devtools. $10 bucks till 4/20/17. Smokin Deal!

DOM Breakpoints

Imagine there is a DOM element that is supposed to be yellow, but occasionally gets set to blue. You need to find out why. You can use a DOM breakpoint to figure out what line of code is modifying the inline styles:

Setting a breakpoint on a <li> element

There’s a line of code that constantly gets called:

domElement.style.color = 'yellow'; //called all the time.

Then there’s a different line of code somewhere else that gets called only once in a blue moon. *pun intended*

domElement.style.color = 'blue'; //called once in a blue moon

To avoid the distraction of the yellow call, you can simply set “never pause here” on that line.

Your input

I’d love to hear how you would use “never pause here”. Please let me know in the comments section. Also, recommend & follow if you found this useful. It helps content like this get found!