FireBug's Console For Debugging Javascript Data (Thanks Ray Camden)
Posted January 14, 2009 at 8:52 AM 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:
| | | | | |
| |  | | ||
| | | |
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.
The Firebug console is awesome. It actually has quite a few methods which are documented here: http://getfirebug.com/console.html
@Alan,
Good to know - I didn't even know the DOM tab would include user-defined Javascript objects! Your comment got me thinking:
http://www.bennadel.com/index.cfm?dax=blog:1459.view
@Nathan,
Thanks for the link.
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.
@Steve,
Good point. I guess, it's probably best just to use them when something is going wrong.
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.
@JAlpino,
Mark Drew just walked me through some debugger stuff this morning. Looks really nice.
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.
You have saved me once again! I was in the alert box hell, when I found this post. Thank you!!!
