Using Firebug

by jeremyjones on March 20, 2011

  • Share
  • CevherShare
  • Share

JavaScript is easy to write, but can be difficult to debug effectively due to the limited debugging functionality it provides. One big difficulty is the lack of an effective way to display debugging messages. You can overcome these limitations with the help of external debuggers.

If you are developing JavaScript code for the Firefox browser, then you could do a lot worse than install the free Firebug plug-in. This powerful tool is a great way to find any problems that are hiding in your code. You can install Firebug in the same way as any other Firefox plug-in, simply go to the Firefox add-ins tools, search for it and then follow the prompts to install the software,

Once installed, you can activate Firebug when you press the F12 key. You are now ready to debug your code.

A good way to start is to create breakpoints in your script. These breakpoints allow you to run through the code and pause so you can examine the value of each variable to help you find the problem. To create a breakpoint:

  • Click on the green check button to toggle the Firebug debug panel
  • Switch to the script tab
  • Scroll to the desired line and set a breakpoint by clicking on the left sidebar
  • Reload the page

You can step through your code a line at a time using the step over function. With each line, you can check the current value of any variables to help you determine if any of them are the cause of the problem.

An alternative method that you can use to set breakpoints is to use the following line in your code:

debugger;

Another useful feature of Firebug is the ability to display script output. You can use an alert message box, which will pause script execution, or the console.log function. This example demonstrates the use of this function:

console.log(“Start”);
console.log(“Title: %s, page: %d”, title, page);

The many, more powerful features of Firebug can take a long time to master, but if you write JavaScript code on a regular basis it might be a good idea. Good debugging skills can save a lot of time the next time you need to locate a bug.

Leave a Comment

Previous post:

Next post: