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

Posted January 14, 2009 at 8:52 AM

Tags: Javascript / DHTML

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:

 Launch code in new window » Download code as text file »

  • <!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.

Download Code Snippet ZIP File

Post Comment  |  Ask Ben  |  Permalink  |  Other Searches  |  Print Page


You Might Also Be Interested In:



Learning ColdFusion 9 - ColdFusion 9 tutorials, samples, examples, demos

Reader Comments

Jan 14, 2009 at 9:06 AM // reply »
2 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.


Jan 14, 2009 at 9:16 AM // reply »
29 Comments

The Firebug console is awesome. It actually has quite a few methods which are documented here: http://getfirebug.com/console.html


Jan 14, 2009 at 9:34 AM // reply »
6,516 Comments

@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.


Jan 14, 2009 at 10:36 AM // reply »
12 Comments

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.


Jan 14, 2009 at 10:38 AM // reply »
6,516 Comments

@Steve,

Good point. I guess, it's probably best just to use them when something is going wrong.


Jan 14, 2009 at 2:20 PM // reply »
14 Comments

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.


Jan 14, 2009 at 3:02 PM // reply »
6,516 Comments

@JAlpino,

Mark Drew just walked me through some debugger stuff this morning. Looks really nice.


Jan 15, 2009 at 10:51 PM // reply »
28 Comments

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.


Post Comment  |  Ask Ben

Recent Blog Comments
Nov 21, 2009 at 1:13 PM
My First ColdFusion Builder Extension - Encrypting And Decrypting CFM / CFC Files
@Ben, Because I am pedantic, I just want to make sure that everyone knows there is absolutely no encryption going on. There is only encoding and obfuscation. The cfencode tool only obfuscates your C ... read »
Nov 21, 2009 at 12:28 PM
Using ColdFusion Structures To Remove Duplicate List Values
@Jody I can't seem to get your code sample to work. If you are still having problems, try this code out and see if it gets you what you wanted. <!--- Comma delimited list with various duplicates ... read »
Nov 21, 2009 at 11:03 AM
Groovy Operator Overloading Does Not Work In The ColdFusion Context
Hi Ben, Thanks for this informative post. Now I am reading ur old posts too ... read »
Nov 21, 2009 at 10:56 AM
HostMySite.com Has The Best ColdFusion Hosting
@Mehul, Yes very nice people, however several downtimes per day which was not acceptable. Hence we had to move out. I am glad you are having good luck with them so far. ... read »
Nov 20, 2009 at 11:32 PM
Five Months Without Hungarian Notation And I'm Loving It
I've used headless camel case for years for not only ColdFusion variables, but also SQL tables and fields... pretty much everything involving code. I also subscribe to the "don't abbreviate and clea ... read »
Nov 20, 2009 at 11:00 PM
Five Months Without Hungarian Notation And I'm Loving It
@Marcel, Yeah, I always err on the side of longer but more readable variable names. As for the camel casing of CF methods and the headless camel casing of custom items, I get around this by always ... read »
Nov 20, 2009 at 10:56 PM
Five Months Without Hungarian Notation And I'm Loving It
I use the following and love it: my.namespace.MyComponents.functionMethodsOrUDF() CONSTANT_VALUES_OR_PROPERTIES One thing I always try is to CamelCaseBuiltInColdFusionFunctions() so others can tell ... read »