longchamp
tory burch outlet
tory burch outlet
ray ban australia
Babyliss
nike air max
Michael Kors outlet
toms outlet
nike air max
louis vuitton outlet
nike air max
coach outlet
nike air max
ray ban uk
oakley sunglasses
Michael Kors outlet
Two ways to set a conditional breakpoint in JavaScript

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 = Object.prototype.toString.call( 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 = Object.prototype.toString.call( obj );
  if ( ~type.indexOf( "Str" ) ) {
    debugger;
  }
  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…

chormemenu

chromeconditional

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

iemenu

ieconditional

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

firefox

That can definitely be a time saver!

 
  • http://twitter.com/AnkitGarg2301 Ankit Garg

    Good Point !!

  • Elgrecko

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

    • jcreamer898

      Thanks!

  • http://tech.hugr.fr Jean-Denis Vauguet

    It also exists in Firebug. See http://www.softwareishard.com/blog/firebug/firebug-tip-conditional-breakpoints/ 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
      1111111111111111111111111111

      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.

      http://www.javascriptturnsmeon.com/the-tilde-operator-in-javascript/

      • roblevintennis

        Got it thanks. In addition to your explanation and links the following helped me to understand how it would apply to indexOf:
        !!~-1
        false
        !!~0
        true
        !!~1
        true

        • 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"