JavaScript Scratches

Debugging & Troubleshooting

Putting Out Fires

Debugging and troubleshooting any program can be a bit of a bear. Your browser may have a debugging feature built into it, but there are other ways to help put out a fire, or perhaps avoid them altogether.

Test your JavaScript code each time you add a new function or feature - don't wait until you've written 468 lines of code with 23 new functions before testing.
Document and comment (in the code) any new or different code you found or implemented, and why you chose it.
Practice version control (CVS) - as you add new code and functions, save your file with a version control name, so you can always go back if you have to.
Print out the value of variables at various points in your script. This will tell you what is happening at that point. Comment them out when all is well.

Try,Catch,Finally

'exceptions' are what the techs call 'errors', and JavaScript has a way to deal with them.

These 3 blocks of code are similar to functions - they HAVE to be enclosed in braces { }.

It's a way of testing your code BEFORE you go to production with it.

There is one other statement that can be added after the 'try,catch' blocks: 'finally'.

This block will execute regardless of the success or failure of the test, and usually does any clean up, but not usually required.

JavaScript errors come in differenct disguises: reference, type, range, syntax. We'll talk about these next.

Two other problems may arise from URI or eval issues. Refer to the Resources for those uncommon fires.

Syntax Errors

Probably the most common. Forgetting the semi-colon or a closing bracket; not quoting strings; spelling a keyword wrong. I've certainly done all of those.

While this may not halt execution of the rest of your scripts, it will throw an error, and Sophie will not be impressed.

These errors CANNOT be caught using the 'try,catch' code, (they happen before runtime), so may slip by if you don't actually look for them.

Again, in Safari, check the Console tab using the Vew Source feature.

Reference Errors

This is when you try to use (reference) a variable that doesn't exist, or it hasn't been initialized.

'use strict';
let i = j;
try {
	j = i++;
}
catch(err) {
	let text=err.name;
}

View Source Code in Safari and note the '!' i a red circle. Click the 'Console' tab. It will tell you 'Can't find variable j' and even what line the error is on.

This will be the first error found - your HTML page may render completely, even with the error. Other errors further in your code won't appear until this one is fixed, and the page refreshed.

Type Errors

JavaScript variables are 'loosely typed', meaning the datatype is determined by the value of the variable. Even so, there are some things JavaScript doesn't like when mixing things up.

let aNum = 42;
try {
	aNum.toUpperCase();
}
catch(err) {
	let text=err.name;
	document.getElementById('TypeErr').innerHTML=text;
}

Here we've properly inititalized the 'aNum' variable, but then we've used a string method to convert it to upper-case. Well, of course that isn't likely to happen:

Range Errors

Playing outside the box will sometimes lead to these kinds of errors. A loop you're attemping has reached a value that is outside the parameters of the loop.

Or you've tried to initialize an array with a negative value (maybe a typo).

Or you've done something like this:

let aLargeNum = 486.23409807234;
aLargeNum.toPrecision(486);

This will throw an error:
RangeError
toPrecision() argument must be between 1 and 100 when viewing the source code under the 'Console' tab.

The toPrecision() method in JavaScript is a Number method that returns a string representation of a number to a specified number of significant digits, so trying to get 149 is outside the box.
An integer specifying the number of significant digits to which the number should be rounded. If omitted, the method returns the number as a string without any rounding. The value must be between 0 and 100 (inclusive), otherwise, a RangeError is thrown.

To avoid this error, the value in brackets must be adjusted.

Checking a Variable's Value

I've used 4 different ways to check the value of a variable:

use 'alert'
this immediately (or after a certain condition is met) prints a notification
print the variable value, adding the line number in the code
most browsers in their 'debugging' mode have access to the console, where you can examine variables
"use strict;"
enables 'strict' mode, a restricted subset of JavaScript to fix deficiencies and provide stronger error checking

'strict mode' is Best Practice as it prevents undeclared variables and objects; prevents function deletions; no duplicate parameter names; no octal numeric values; no escape characters; and several other operations.

For more about 'use strict' visit W³.

Browser Tools

Safari has a 'Developer' mode that catches and informs you of errors. Available through the 'View Source Code' feature. If you use it, check out all the Developer tools and features available.

Firefox has a Developer's Toolbox with over a dozen add-ons. There is an add-on 'Firebug' available for debugging.

With Chrome, right-click on a page to access their Developer tools. The 'Inspect' option has a JavaScript debugging feature which shows you any errors.

Breakpoints

These are points in a script where you want to pause execution, giving you a chance to view some internal states.

They are available in all browsers but implemented different ways in each browser. Be aware they are available as a debugging tool, and examine your browser documentation for the proper use of them.

All in all, debugging using browser additions may be an unavoidable choice, but understanding how JavaScript works and interpreting the error messages is a good place to start.