How to Debug JavaScript With Firebug

Debugging JavaScript can be a long, arduous process, but Firebug makes it easy by allowing you to step through the code and find exactly what you're looking for by isolating certain values in the code. Firebug works with Firefox and can ensure a more pleasant debugging experience.

Instructions

1. Conduct a simple Internet search to find the Firebug application and install it as a Firefox extension. After installation there should be a green check mark at the bottom right corner of your browser.

2. Open the Javascript HTML file you wish to debug. When it opens you should see an alert box that shows a series of ascending numbers and then the term "undefined" at the end of the string. The "undefined" is where your bug is.

3. Press the green check mark at the bottom of your browser to open the Firebug debug panel.

4. Switch to the script tab and define your breakpoint. A breakpoint suspends the debugging process when it is encountered. Reload the page.

5. Click the "step over" button. Firebug is updating all the variables until your breakpoint and listing them on the right side of the debug window.

6. Watch the program step through the code and follow the values it defines on the right side of the debug window to find the root of your bug.

7. Spot the problem and retype the correct code. Run Firebug to make sure the problem is fixed.

Tips & Warnings

• You can add breakpoints by adding "debugger;" anywhere in the code. That way you can skip the breakpoint step.

• Firebug only works with a Firefox browser. You can download Firefox, which works just like Internet Explorer, through any Internet search.