Two ways to set a conditional breakpoint in JavaScript

On February 19, 2013, in Uncategorized, by jonathancreamer

Debugging JavaScript can be a tedious process. Especially when debugging a function that is called many times in an application. There may be some kind of utility function in an app that processes data, but there’s a bug with one of the values.

In order to debug the function you’d open up Chrome or IE’s Dev Tools and throw in a breakpoint. If the function being debugged is used in many areas, you’ll have to hit continue multiple times to get to the specific case needed.

There are two different ways to avoid this problem.

Say you have the following code.

var process = function( obj ) {
  var type = obj );
  return type;

console.log( process({}) );
console.log( process([]) );
console.log( process("something") );
console.log( process(2) );

The process function gets called 4 times here. What if while debugging, only the case in which the object is of the type String is needing to be debugged?

The first way to do this is with just code. The debugger; is a statement in JavaScript that will trigger a breakpoint in the code. By putting debugger into the code, the execution will pause at that line. The debugger can also be wrapped with a conditional statement that only runs when the condition is true.

var process = function( obj ) {
  var type = obj );
  if ( ~type.indexOf( "Str" ) ) {
  return type;

Now the debugger will only be hit when the type is of “String”.

The other way to set a conditional breakpoint is with the browser’s development tools.

In Chrome…



And in IE10, and I’m pretty sure 9 also.



UPDATE 2/25/2013 several readers asked me to point out that Firefox also supports this feature…


That can definitely be a time saver!

  • Ankit Garg

    Good Point !!

  • Elgrecko

    Great tip, thanks for sharing. And yes, this does work in IE9.

    • jcreamer898


  • Jean-Denis Vauguet

    It also exists in Firebug. See for a review of features.

    • jcreamer898

      Updated the post to include Firefox, thanks!

  • roblevintennis

    forgive me but what does ~type do?

    • haromaster
    • jcreamer898

      Like haromaster said, it’s a bitwise not, but what it really does is it performs a not operation on every bit of the variable.

      It just so happens that -1 in signed binary is a bunch of 1′s

      When you perform a not on each of those bits, it turns them all to 0. Effectively turning ~-1 into 0.

      Since indexOf returns -1 when it doesn’t find anything, this makes the ~ perfect.

      • roblevintennis

        Got it thanks. In addition to your explanation and links the following helped me to understand how it would apply to indexOf:

        • roblevintennis

          Of course I would still just use type.indexOf(‘Str’) !== -1 (or >= 0 or whatever)

          • roblevintennis

            I don’t mean to come off as “challenging” or something and I do appreciate the explanation to my first comment Jonathon!

          • jcreamer898

            No problem!

  • Pingback: Two ways to set a conditional breakpoint in JavaScript - emnotes "blog"