Better Javascript debugging with the Firebug console

The traditional method of debugging Javascript in the browser involves using the alert method to display a dialog box. Clicking OK for the 100th or attempting to debug browser events will soon have you ready for a new approach.

Firebug has a handy console pane which displays erros and allows you to enter Javascript and execute it immediately.

Screenshot of an empty Firebug console

Using Firebug's console API you can also log messages to the console from within your browser scripts and avoid the pain of repeated alert dialog boxes.

The log method takes an argument and prints it in the console.

 

console.log('Total price is');
console.log(totalPrice);

 

Screenshot of the Firebug console with log messages

Several arguments can be passed and Firebug will join them together, separated by a space:

 

console.log('Total price is $', totalPrice, ' and the time was ', transactionTime);

 

console.log() will take an object, too, but a better choice can be console.debug();

 

console.debug(window.location);

 

The debug method automatically creates a link in the console window. Clicking the link in your Firebug console takes you to the DOM inspector for that object.

Screenshot of the Firebug DOM inspector

For small objects it can be useful to show their contents right here in the console window.

 

console.dir(window.location);

 

Screenshot of the Objet properties in the Firebug console

There are several more console methods available. Read through the Firebug Console API documenation to find out more.

Posted on 5/2/2008 4:16:00 AM by matt

Permalink | Comments (0) | Post RSSRSS comment feed |

Categories: Javascript | Front end development

Tags:

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5