FireBug's Console.dir() vs. DOM Tab
Posted January 14, 2009 at 9:27 AM by Ben Nadel
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:
| | | | | |
| |  | | ||
| | | |
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:
| | | | | |
| |  | | ||
| | | |
... 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!
Reader Comments
Wow, that was a quick follow up and again very handy. Can already think of some uses where I could use this at work. Thanks!
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...
@Steve,
Mark Drew just showed me like 10 minutes ago how to use the step-debugger. Very cool 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!
thanks Ben for sharing this very useful thing with us. I got the right solution of my problem.
