5.5.2 Debugging

5.5.2 Debugging

So, what do you do when you load your page in a browser and get...nothing? Thankfully, there are tools that can help pinpoint problems in your code without having to manually search line by line. Let's have a look at a couple of broken pages and how we can determine why they're broken.

1. Load this Hello Map example in Chrome, Firefox, or Edge. Your browser window should be blank because of an error in the page.
2. Open the JavaScript console as follows:
   
   Chrome - click on the menu icon (3 stacked dots to the right of the address bar), then select More Tools > Developer tools > Console.  (Or use the Ctrl-Shift-i shortcut.)
   Firefox - click on the menu icon (3 stacked lines, also in the upper right of the window) and select Web Developer > Web Console.
   MS Edge - click on the menu icon (3 stacked dots, also in the upper right of the window), then select More Tools > Developer tools > Console.
   
   You should see an error message like the following, depending on your browser. (The console may report warnings in addition to errors, in which case you’ll need to skip over the warnings or toggle them off.)
   
   Uncaught SyntaxError: Unexpected identifier 'center' 
   
   The browser ran into a problem executing the JS code beginning with the word center in main.js.  It should tell you the line number and the character number where the error occurred as well.  (Many IDEs report the location of the cursor when editing a document; in Notepad++ you'll find this info in the bottom middle of the application window.)  
    
3. If this was your own page, you could have a look at that line in Notepad++ or whatever editor you are using. Let's just look at the source code in the browser in this case.
4. Within the Console, click on the link listed next to the error message to view the code being loaded from that file. Depending on the browser you’re using, the code lines may be numbered. The "problem" line may also be highlighted or have the cursor on it.  (If the .js code won't load in the Console, try reloading the page with the Developer Tools pane open.)
   
   As is sometimes the case, the problem here can be found just before the flagged line: there is no comma after the setting of the zoom property on the previous line. It may seem confusing that the browser is flagging one line when the line requiring a fix is the previous one, but it actually makes sense if you remember that a property-value setting doesn’t need to be followed by a comma (i.e., when it’s the last one associated with the object). So the browser flags the line where it’s finding something unexpected. (It expects a comma or closing brace after the zoom property.)
5. Load the second Hello Map example in Chrome, Firefox, or Edge. Again, your browser window should be blank because of an error in the page.
6. Using the error checking steps outlined above, you should identify the following error:
   
   Uncaught SyntaxError: Unexpected token ')' on line 15
   
   Line 15 is the last line of the script file -- a closing parenthesis, followed by a closing brace, followed by a semi-colon.  If you were to look at the code in Notepad++ and move the cursor around those characters, the IDE would highlight for you the opening characters that match up to the closing characters.  Hopefully you'll see the issue here is that the opening parenthesis came before the opening brace, but the closing characters are in the wrong order.  The closing brace needs to come before the closing parenthesis.

While checking the console for errors and using IDE syntax highlighting can often be a big help, there are likely to be times when you're unable to identify the problem in your code. Another method for pinpointing problems is to produce some output at strategic points in your code. This could be as simple as an alert() statement that confirms that code execution reached a certain point, like

alert("Finished adding overlays");

You might also use an alert() box to display the contents of a variable or the property of some object:

alert("The coords are: " + pt.latitude() + ", " + pt.longitude());

An alternative to using alert() in this way is to write messages to the JavaScript console. This is especially preferable when you want to diagnose a problem with a loop and would rather not have to dismiss alert() boxes repeatedly. Writing messages to the console can be done as follows:

console.log("The value of i is " + i);

Over years of web development, I have found that these simple debugging strategies usually lead me to finding and fixing my errors.