JavaScript is not easy to debug. This is particularly the case when we try to “hack” some existing code for our own purposes rather than write the code from scratch, carefully checking each bit of code as we add it. We cut and paste and chop and change without fully understanding the intricacies of the code – no shame in that, of course, this technique has fuelled 20+ years of web development.
Take this example, which uses the Leaflet mapping library. When viewed in Firefox, the map fails to appear, so the immediate response is to press F12 and view the Console, which tells me I have a syntax error and in particular there is a missing closing parenthesis after an argument list:
This sounds promising, so I click on the line number (56) on the right hand side and the debugger is opened at the problem line:
However, the debugger points to the line where the the closing script tag appears rather than where the missing parenthesis should be. This is probably no more than what we can expect from Firefox but it is not enough to help us identify the problem. We could work our way through the code looking for the missing parenthesis but if the code is long, and not all our own work, this will not be easy.
One way to resolve this is to use some of the features of the free and open source Atom text editor. The first thing to do, after opening the problem HTML file in Atom, is to check for an inbalance in the parentheses. This can be done by using the Find in Buffer tool:
Here there are 35 instances of the left parenthesis but there were only 33 instances of the right parenthesis. So, in fact, I have two missing. But where should they go?
The next useful Atom tool is the Bracket Matcher (found under the Packages menu). Firstly, I put my cursor at the start of my main JavaScript function, in this case init (starting on line 18):
From the Bracket Matcher, I select Select Inside Bracket. If the code within the function is sound then all of that code will be highlighted. That it isn’t shows that there is a problem within the function and I can iterate towards a solution.
I put the cursor at the start of the first block of code (a call to the JQuery getJSON method) within my main init function (line 29) and repeat the process:
Again, the editor fails to recognise the bracket pair, but this time there is a lot less code to examine manually. In fact the error was caused by a failure to close a list of arguments in the call to the Leaflet geoJSON object (line 30), as hinted at by the original Firefox error. A new line (35 below) was added:
Now if I put the cursor inside my function and use Select Inside Bracket, the whole function is highlighted, which shows it is balanced out:
Remember I had two missing parenthesis, so I repeat the Select Inside Brackets for my next major code block:
Here I have a slightly different problem – the two calls to getJSON (line 39 and line 47) should be separate, whereas here they are nested. So I need to add some code to separate them (line 47 below):
Repeating the Select Inside Brackets will now show two separate code blocks and my script is finally fixed; I can check this by repeating the search for opening and closing parentheses – the totals should match.
Finally, another useful feature of Atom that does a similar thing is the matching bracket/parenthesis highlighter:
Here I have put the cursor to the right of a curly bracket (line 49) and Atom underlines it and its matching pair (line 54). If the two are not where you expect them to be then you have a problem. This technique also works with parentheses.
Nick Gould – February 2017