Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Simple Debugging
You can track down many of these errors quite simply, provided you can analyze which code instructions are being executed when things go wrong, and what values your variables contain at that moment.
Let's look at some simple ways to achieve this.
Easy Debugging with alert()
Sometimes you want a really simple and quick way to read a variable's value, or to track the order in which your code executes.
Perhaps the easiest way of all is to insert JavaScript alert() statements at appropriate points in the code. Let's suppose you want to know whether an apparently unresponsive function is actually being called, and if so, with what parameters:
function myFunc(a, b) {
alert("myFunc() called.\na: " + a + "\nb: " + b);
// .. rest of function code here ...
...}
When the function is called at runtime, the alert() method executes, producing a dialog like the one in Figure 1.
)
Figure 1 Displaying debug information in an alert() dialog.
Remember to put a little more information in the displayed message than just a variable value or one-word comment; in the heat of battle, you'll likely forget to what variable or property the value in the alert() refers.
A More Advanced Approach: The Console
Placing alert() calls in your code is perhaps OK for a quick-and-dirty debug of a short piece of code. The technique, however, has some serious drawbacks:
- You have to click OK on each dialog to allow processing to continue. This can be demoralizing, especially when dealing with long loops!
- The messages received are not stored anywhere, and disappear when the dialog is cleared; you can't go back later and review what was reported.
- You need to go back into the editor and erase all the alert() calls before your code can “go live.”
Thankfully, most modern browsers provide a JavaScript Console that you can use to better effect for logging debugging messages. How to open the Console varies from browser to browser:
- In IE9, to open the Developer Tools: F12
- For Chrome's Developer Tools and Opera's Dragonfly Debugger: Ctrl + Shift + I;
- Using Firefox with the Firebug extension: F12
The examples in this article assume that you're using one of the above debuggers. If not, you may have to consult your debugger's documentation to see how to carry out some of the tasks I describe.
The Console provides a number of methods you can use in your code in place of the cumbersome and limited alert() call, perhaps the most well-known being console.log():
function myFunc(a, b) {
console.log("myFunc() called.\na: " + a + "\nb: " + b);
// .. rest of function code here ...
...}
Rather than interrupt program operation, console.log() operates invisibly to the user unless (s)he happens to be looking at the Console. Figure 2 shows the result of running the above code with he console open in Firefox with the Firebug extension installed.
)
Figure 2 Logging messages to the JavaScript Console
In addition to console.log(), you can also take advantage of console.warn(), console.info(), and console.error(). These all record messages at the console in slightly different styles, allowing you to build up a picture of how your script is running. Figure 3 shows how Firebug's Console displays each one; the display will be slightly different in other browsers.
)
Figure 3 Various types of Console message
Grouping Messages
Sorting Console debugging messages into groups makes them even more readable. You can name the individual message groups any way you like:
function myFunc(a, b) {
console.group("myFunc execution");
console.log("Executing myFunc()");
if(isNaN(a) || isNaN(b)) {
console.warn("One or more arguments non-numeric");
}
console.groupEnd();
myOtherFunc(a+b);
}
function myOtherFunc(c) {
console.group("myOtherFunc execution");
console.log("Executing myOtherFunc()");
if(isNaN(c)) {
console.info("Argument is not numeric");
}
console.groupEnd();
// .. rest of function code here ...
}
In this code snippet I've defined two console.group() sections, and named them to associate them with the functions in which they execute. Each group ends with a console.groupEnd() statement. When the code runs, any console messages display in groups, as shown in Figure 4.
)
Figure 4 Grouping Console Messages