Use the Debugger!

Consider this a plug for using the good ol’ debugger as part of your Javascript workflow. We’ve all done the thing where we throw console.logs all over the place, but I’m here to tell you that the debuggercan be your friend. It’s not that scary. Really. How does this work, you may be asking? Well, let me show you using a very silly (though I think still informative) example. Let’s say we have some code that looks like this. And let’s say that we have a function with a conditional and we’re wondering why we’re not making it to that code. What’s going on??? Let’s throw a debugger in here. Let’s see what’s going on with thisName. Something is off here.

function awesome(name, amount) {
  const thisName = name.downcase();

  debugger;

  if (thisName === "matt") {
    return `Indeed, ${name} is extremely awesome.`;
  }

  return `${name} is ${amount} awesome, but they're no Matt.`;
}

awesome("Matt", "super"); // "Matt is super awesome, but they're no Matt."

Refresh the browser and the code will stop at our debugger. We just added a breakpoint. We can pop open the console in our browser and from there we have access to what’s happened in the code up to that point. So I could just type thisName or name or amount and see what those values are. Oh, thisName is still Matt and I want that to be lowercase so that my conditional can be met no matter how a user inputs that name. Hmm…oh I see, my string function is incorrect. Wonder what would work? Let’s try name.toLowerCase(). Great, I can see (while still in the console and at this breakpoint) that that is the correct string function. I’ll update my code, remove the debugger and go about my day.

Obviously a super contrived example, but I think you can see how useful this can be when things get more complicated. Using the debugger can dramatically speed up your debugging time because you can play around in your actual code.