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 cf.Objective() 2013 (Bloomington, MN) with:

FireBug's Console.dir() vs. DOM Tab

By Ben Nadel on

In my previous post on FireBug's Console object, Alan Pennell-Smith made a comment that got me thinking; he said that if one were to forget to use console.log() methods, the data would still be available in the DOM tab of FireBug's Javascript. To be honest, I didn't even know that the DOM tab included Javascript objects (like I said before - I know very little about the Javascript aspects of FireBug). But, this begged the question: is the consol.dir() output dynamic? Or, does it display static data that was available only at that given moment in run time?

To explore this, let's update my previous 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.dir( objGirl );
  •  
  •  
  • // Update the complex object.
  • objGirl.BestQualities = [
  • "Legs",
  • "Butt"
  • ];
  •  
  • // Debug updated data in FireBug.
  • console.dir( objGirl );
  •  
  • </script>
  • </head>
  • <body>
  •  
  • <h1>
  • FireBug Console Testing
  • </h1>
  •  
  • </body>
  • </html>

Here, we are creating the complex Javascript object and outputting it using console.dir(). Then, we update a property of the complex object and re-output it to the console. At this point, here is what the DOM tab shows us:

 
 
 
 
 
 
FireBug's DOM Tab Shows Only Final State Of Javascript Data Points. 
 
 
 

Notice that once the page has finished running, the DOM tab only shows us the final state of our complex Javascript object. If we flip over to the Console, however:

 
 
 
 
 
 
FireBug's Console Displays Static Data For Snapshot Of Runtime. 
 
 
 

... we can see that in the console, the output shows us a static version of our complex Javascript object in that given snapshot in time. FireBug console.dir() for the win!

Tweet This Groovy post by @BenNadel - FireBug's Console.dir() vs. DOM Tab Thanks my man — you rock the party that rocks the body!



Reader Comments

Just FYI, user defined variables show up in bold in the DOM panel. Well, I say user defined, but I really mean any non-native objects, including those added by Firebug itself. Built-in DOM elements show up in plain text.

As far as getting to JS variables without using the console object, you can also use the command line: http://getfirebug.com/commandline.html

The command line, combined with the breakpoints or the debugger keyword can be a very powerful tool.

The DOM Tab shows endstate. Real value comes from the Watch tab of the Script tab, when stepping through a JS process. You can create a Breakpoint, for debugging, rerun your script, and step through line by line from your Breakpoint, inspecting each object at each step of your process. Great stuff...

For some real step-debugging fun try making an ajax call, stepping through that function that calls some cf page which is also set up for debugging (via CF debugging or Fusion Debug). Step through some CF in Eclipse and then return it to Firebug. Weeeee!