Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2009 (Lansdowne, VA) with:

FireBug's Console For Debugging Javascript Data (Thanks Ray Camden)

Posted by Ben Nadel

I love FireBug. I think it is the most amazing FireFox plugin, hands down. I don't think I go through more than an hour of development work without using it; it makes debugging CSS and XHTML issues mere child's play. The way it breaks down CSS rules and shows you the cascading nature of the various rules as they are applied to a selected DOM element and which CSS files each rule came from... you can't even choose the right words to fully express the usefulness of that.

This morning, thanks to Ray Camden, FireBug just got exponentially cooler! He introduced me to FireBug's "console" Javascript object. Of course, I've heard of console.log() before in passing, but I just never looked into it. To be honest, FireBug is such a huge plugin that once I started to use the CSS, XHTML Inspection, and NET activity features, I simply stopped looking into its other features; I figured that I had already squeezed all the tasty goodness out of it.

But that has all changed! The Console object has two methods that I think will revolutionize the way I debug my Javascript. Those methods are log() and dir(). Log() prints a message to FireBug's console. Dir() prints an interactive object explorer to the console. Let's take a quick look at a small example:

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html>
  • <head>
  • <title>FireBug Console Testing</title>
  •  
  • <script type="text/javascript">
  •  
  • // Define complex object.
  • var objGirl = {
  • Name: "Molly",
  • Hair: "Brunette",
  • Eyes: "Brown",
  • BestQualities:
  • [
  • "Smile",
  • "Laugh"
  • ]
  • };
  •  
  • // Debug data in FireBug.
  • console.log( objGirl );
  • console.dir( objGirl );
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <h1>
  • FireBug Console Testing
  • </h1>
  •  
  • </body>
  • </html>

As you can see in this example, we are building a complex Javascript object. We then pass it to both the log() and dir() methods. This results in the following FireBug console output:

 
 
 
 
 
 
FireBug's Console Output For Complex Javascript Objects. 
 
 
 

Awesome! I can't get over how easy this is going to make looking at complex Javascript objects. When I think of all the times that I've tried to create massive data strings for alert() calls by using a for-in object loop and string concatenation. So many wasted hours!

FireBug, you are amazing. Ray Camden, you rock - thanks for showing this to me.

NOTE: Running console.log( console ) doesn't do anything cool... it doesn't do anything at all, in fact.




Reader Comments

Handy! I didn't know that. But if you weren't that organised to put the console.log() and console.dir() in your code to begin with, the variable will usually be accessible in the DOM tab of FireBug.

Reply to this Comment

Console is the bomb. An absolute must for anyone doing client-side development. Their is one downside, which we hit here this morning. Be careful to remove your console statements from code prior to pushing to production. Internet Explorer (go figure) does not support console, and the console statements will error your code and stop process.

Reply to this Comment

Don't forget about the 'debugger;' statement that lets you dynamically add in break points for your code. I just found that out and have been loving it ever since.

Reply to this Comment

Very cool, thanks for sharing! I've played a bit with the JS debugger in the past, but this will definitely make it much more useful.

Reply to this Comment

One thing to note though.
Remove any console.log() code you have in your javascript before you go live.
Why?
Microsoft in their wonderful wisdom for IE9 will halt javascript functionality when it comes across console.log().
It will only run javascript fully if you boot up the IE9 developer thing you will then find it all just works as you expect.
So IE9 - Only reads console.log() when you got the developer window up (F12)
Crazy.

Reply to this Comment

@Liam,

One way I've gotten around this problem with IE9 and older browsers is to shim out the console object and the various methods it has - log(), dir(), whatever.

You get a consistent interface to use across your code without having to worry too much about the browser.

Reply to this Comment

Here's a handy snippet to enable IE to handle console.log() before the dev tools are opened, so you don't get those nasty errors:

  • if (!window.console) console = {log: function() {}};

Reply to this Comment

I downloaded the code as a text file (ending with .html) but I got only "FireBug Console Testing" with nothing in console. I use Firefox 16.0.1 and Firebug 1.10.6. I need this to work... Help!

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.