Front-end Series: JavaScript debugging tips and tricks

Share on Facebook45Share on Reddit0Tweet about this on Twitter61Share on Google+10

Note: many of these tips are written with Chrome in mind, but are applicable to any modern browser with developer tools.

  1. Understand what is happening in your code
  2. Set and use Breakpoints
  3. Use the Console api
  4. De-minify
  5. Modify scripts locally
  6. Use a Unit-Testing framework

1. Understand what is happening in your code

A prerequisite to debugging is understanding the code in question. Before debugging, you should be able to answer: what is the purpose of this function? What should the parameters be? How will this line affect local and global variables?

Basically, run the code mentally before trying to debug.

2. Set and use Breakpoints

Once you understand how the code should function, set execution breakpoints at key places. When reached, a breakpoint will pause the execution of script on that line. You can then “step-through” the code one line at a time. This view also allows you to inspect any global or local values to ensure they are what you expect them to be. Often times, you can observe a variable which should contain a value, but is undefined. From there it is easy to trace your way back up and see where the error is occurring.

Breakpoints can be set by clicking on the line-number in the script tab of chrome developer tools, or programmatically using the  debugger; directive.

debug-breakpoints

Use the console api

While sprinkling a few  console.log ‘s sparingly throughout your code can be useful, the console api has many useful functions that might serve the purpose better. Here are a few console api methods I have found useful:

console.dir

Displays all the properties of an object.

console.dir

 console.table

Formats arrays and objects as tables, and allows sorting on columns.
console.table

console.time

Starts and stops a timer (string tag based), logs time (in ms) of intermediate code.
console.time

console.memory

Returns heap information for this process.
console.memory

console.trace

Returns a stack trace for the function where it is called.

console.trace

4. De-minify

When debugging, it can be very frustrating to see an error like:

When at all possible, swap out the minified version for a full expanded and commented version of the script.

When a full version is not available, Chrome’s developer tools come to the rescue. The curly brace button below the script will automatically expand lines for better breakpointing and debugging. It does not however rename obfuscated variable names.
de-minify

Minification bugs

Every so often, you can run into the maddening bug of a full script working, and the same minified script breaking. Luckily, these bugs often attributable to one of a few small problems (mostly having to do with missing semicolons).

For example:

These bugs can also creep in from preceding scripts, or when multiple scripts are concatenated together. This is the reason that jQuery plugins typically start with a  ; . It is a preventative measure against misbehaving code above it.

5. Modify scripts locally

Chrome allows you to modify script files and run them locally. Simply double click into source file, type, and CTRL-S to save. Not much more to explain, but very useful trick!

6. Use a Unit Testing framework

There are a handful of very good third-party unit-testing frameworks for JavaScript, each with their own philosophy and syntax.

See this great Stack Overflow post for many more.

Share on Facebook45Share on Reddit0Tweet about this on Twitter61Share on Google+10
  • http://www.sportly.at/ Christofer Huber

    very nice and informative article! I knew nothing of the opportunity to use console.dir and console.table … looking forward to the 2nd part ;)

  • daniel morales

    Very Nice! Congrats! By the way, I usually write ‘debugger’ in my code to create break points. That helps me because I do not need to find what I want to inspect in console

    • shawnfumo

      That can be useful, but sometimes it is just as slow to add the line, refresh the browser, then remove again and refresh when I’m done debugging. Especially since I can’t as easily disable it in the middle of a run like a breakpoint.

      To find code faster in Chrome, if you’re in the sources panel use ctrl/cmd+o to pull up a find-as-you-type search similar to Sublime Text. Then when you have the file ctrl/cmd+shift+o to get a similar search by function names in the particular file. Then ctrl/cmd+b to toggle the breakpoint. If you know the name of the file and function, it should only take a couple of seconds to get to the right spot and set the breakpoint.

      • daniel morales

        Nice! Good to know. I’ll try do it next time :) Tks 4 sharing.

  • clitor

    My dog can write Javascript. It is so simple it hardly needs a debugger. Why don’t you use a proper programming language?

    • shawnfumo

      I know you’re just trolling but for curiosity, what is a “proper” language? If it was so simple, I don’t think it’d have one of the most advanced JIT compiling runtimes out there (in V8, by many of the same people who did the HotSpot JVM).

  • shawnfumo

    If you’re using Chrome, make sure to read the docs as well. While this post covers some of the useful features, there are many more as well. https://developers.google.com/chrome-developer-tools/