How To Debug JavaScript

Fun fact: the term debug was coined by Admiral Grace Hopper while working on the Mark II computer in the 1940's. A moth became stuck inside the computer and Grace commented that they were debugging the computer as they literally worked to remove the bug. The moth was eventually freed and then the term stuck. You can now find that moth at the Smithsonian Museum. 

Back when I was introduced to JavaScript, I used alert dialogs to debug my javascript code. If you're chuckling reading this then you're probably a pro! If not, you should watch my demo where I show you a few different ways to invoke a JavaScript debugger to help you find a bug or resolve a semantic issue in your code.

In the video, I demonstrate how to set breakpoints via the browser debugger controls as well as how to turn on debug mode by using the keyword debugger. These mechanisms should make it easier for you to identify and correct code issues.

 Personally, I tend to rely on the Chrome developer console during the debug process because it helps me evaluate my methods and  complex lines of  code.

Oftentimes, I have to debug code that I myself did not write. This poses its own sets of challenges because I have to try to understand the intent of the code on top of what's wrong with it. Over the years I've gotten better at this process because I follow a few basic principles:

• Practice patience and be sure you have the capacity (time, frame of mind, etc.) to focus on exploring the code.
• Take a break if you get frustrated and come back to it later.  Sometimes you just need to clear your mind and change your perspective in order to identify the issue. This is especially helpful after you've been staring at the code for a long time.
• Define different test cases and then run those test cases to ensure that the code passes each case. It's possible that the developer did not consider every possible scenario for the code to handle.
• Review the code and invoke the debugger to step through each of the functions. You will also be able to see all of the associated variables as they execute.

These principles should surely help you debug your code. I hope the video and tips will make you more confident when you take on your next debugging task.

We like to help fellow developers. In case you missed it, check out our tips on building a successful custom web application. And if you get stuck, let us know if we can help.