Mastering JavaScript

Testing and Debugging
JavaScript debugging
If you are not a completely new programmer, I am sure you must have spent some
amount of time debugging your or someone else's code. Debugging is almost like an
art form. Every language has different methods and challenges around debugging.
JavaScript has traditionally been a difficult language to debug. I have personally
spent days and nights of misery trying to debug badly-written JavaScript code
using alert() functions. Fortunately, modern browsers such as Mozilla Firefox
and Google Chrome have excellent developer tools to help debug JavaScript in
the browser. There are IDEs like IntelliJ WebStorm with great debugging support
for JavaScript and Node.js. In this chapter, we will focus primarily on Google
Chrome's built-in developer tool. Firefox also supports the Firebug extension and
has excellent built-in developer tools, but as they behave more or less the same as
Google Chrome's Developer Tools (DevTools), we will discuss common debugging
approaches that work in both of these tools.
Before we talk about the specific debugging techniques, let's understand the type of
errors that we would be interested in while we try to debug our code.
Syntax errors
When your code has something that does not confirm to the JavaScript language
grammar, the interpreter rejects this piece of code. These are easy to catch if your
IDE is helping you with syntax checking. Most modern IDEs help with these errors.
Earlier, we discussed the usefulness of the tools such as JSLint and JSHint around
catching syntax issues with your code. They analyze the code and flag errors in the
syntax. JSHint output can be very illuminating. For example, the following output
shows up so many things that we can change in the code. This snippet is from one of
my existing projects:
temp git:(dev_branch) ✗ jshint test.js
test.js: line 1, col 1, Use the function form of "use strict".
test.js: line 4, col 1, 'destructuring expression' is available in
ES6 (use esnext option) or Mozilla JS extensions (use moz).
test.js: line 44, col 70, 'arrow function syntax (=>)' is only
available in ES6 (use esnext option).
test.js: line 61, col 33, 'arrow function syntax (=>)' is only
available in ES6 (use esnext option).
test.js: line 200, col 29, Expected ')' to match '(' from line 200
and instead saw ':'.
test.js: line 200, col 29, 'function closure expressions' is only
available in Mozilla JavaScript extensions (use moz option).
test.js: line 200, col 37, Expected '}' to match '{' from line 36
and instead saw ')'.
[ 154 ]
www.it-ebooks.info