Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
Ben Nadel at cf.Objective() 2010 (Minneapolis, MN) with: Doug Hughes and Ezra Parker and Dan Wilson and John Mason and Jason Dean and Luis Majano and Mark Mandel and Brian Kotek and Wil Genovese and Rob Brooks-Bilson and Andy Matthews and Simeon Bateman and Ray Camden and Chris Rockett and Joe Bernard and Dan Skaggs and Byron Raines and Barney Boisvert and Simon Free and Steve 'Cutter' Blades and Seth Bienek and Katie Bienek and Jeff Coughlin
Ben Nadel at cf.Objective() 2010 (Minneapolis, MN) with: Doug Hughes@doughughes ) , Ezra Parker , Dan Wilson@DanWilson ) , John Mason@john_mason_ ) , Jason Dean@JasonPDean ) , Luis Majano@lmajano ) , Mark Mandel@Neurotic ) , Brian Kotek , Wil Genovese@wilgeno ) , Rob Brooks-Bilson@styggiti ) , Andy Matthews@commadelimited ) , Simeon Bateman@simBateman ) , Ray Camden@cfjedimaster ) , Chris Rockett ( @RockettMan ) , Joe Bernard@JEBernard ) , Dan Skaggs@dskaggs ) , Byron Raines ( @byronraines ) , Barney Boisvert@barneyb ) , Simon Free@simonfree ) , Steve 'Cutter' Blades@cutterbl ) , Seth Bienek@sethbienek ) , Katie Bienek@KatieBienek ) , and Jeff Coughlin@jeffcoughlin )

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" "">
  • <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 Provocative thoughts 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:

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!