Tom Mix Memorial

Firebug's Javascript Debugger Tools:

Get the Firefox Firebug extension.

Guide to help you utilize JavaScript debugging with Firebug.

Using breakpoints to step through code:
In Firebug click the script tag, select your script from the drop down, and set breakpoints by clicking on the line you want to break. Then use the step into, step over, and step out commands to inspect the javascript. In the watch tab to the right you can see the variable values of the function.

Step Over
Does not mean skip. Execute this code but if its a function I dont want to go into it. Just do it and move on.

Console Tab
The stack is a list of all current function calls and their parameters. The stack trace is a display of the current state of the stack which is useful for determining the state of your program when an error occurs.

Profiler - This keeps track of how many times each function is called and how much time it takes for each function to execute. To start it click the profile buttonin the console tab, then run your application one or more times. Click the profile button again to stop the profiler and view the report/profile in the console tab.

Firebugs Console Object
You can use Firebugs console object to get additional information on a script. You can use the console.log method to do an extensive trace of the execution of an application. Firebug this object called the console object to the Javascript environment when the console tab is enabled. This object provides many objects for tracking and reporting in the console tab. For a complete list of the methods of the console object go to Firebug Console Object Methods List

console.log - An addon that firebug offers
Very useful in helping you understand your own code better. Unlike an alert message, if you do not have the firebug console open, you will not see it. This is what''s intended. We can write out strings, variables, see output etc to the console itself.

var foo = 10; var bar = 20; if (foo < bar) { console.log ("Foo is greater than Bar") console.warn ("Highlights in yellow") console.error ("Highlights in red, appears in status bar as well") }

Examples
// grab single element
var myTitleLink = document.getElementById("mainTitle");

// information about the node
console.log("This is a node of type: ", myTitleLink.nodeType);
console.log("Inner HTML: ", myTitleLink.innerHTML);
console.log("Child nodes: ", myTitleLink.childNodes.length);

// how many links?
var myLinks = document.getElementsByTagName("a");
console.log("Links: ", myLinks.length);

// here are some extra examples of combining these:
// First, grab a div called "homeNav"
var navItems = document.getElementById("homeNav");

// get information about that node
console.log("This is a node of type: ", navItems.nodeType);
console.log("Inner HTML: ", navItems.innerHTML);
console.log("Child nodes: ", navItems.childNodes.length);

// how many ordered lists?
var orderedLists = document.getElementsByTagName("ol");
console.log("Ordered lists: ", orderedLists.length);

// narrowing down the links further - use another element, not the whole document.
var myLinks = navItems.getElementsByTagName("a");
console.log("Links in navItems: ", myLinks.length);

// or even combined
var x = document.getElementById("mainNav").getElementsByTagName("a");
console.log("Links in mainNav: ", x.length);