Awesome Tips For Using Firebug To Navigate And Augment The DOM
Posted May 31, 2011 at 2:39 PM by Ben Nadel
Last week, I read JavaScript Web Applications by Alex MacCaw. In that book, Alex really brings the reader through the entire JavaScript application development process, covering topics as tangential as GZipping and Firebug functionality. In fact, he had a few Firebug tips that just about blew my mind. Specifically, Alex pointed out that you could access recently-selected DOM elements or use XPath to programmatically locate DOM elements.
| | | | ||
| | | |||
| | | |
Firebug allows you to use the selection tool to examine runtime DOM (Document Object Model) nodes in the current HTML document. I use this all the time to look at the applied CSS classes and runtime styles. What I didn't know, however, was that Firebug puts these selected DOM node references into variables that are accessible in the console's command line tool.
Apparently, you can use the variables $0 through $N (where N appears to be vendor specific - ie. Firebug vs. native consoles) to reference the recently selected DOM nodes. These variables can then be used with existing page scripts like jQuery:
- $( $0 ).css( "background-color", "red" );
This would get the most recently selected DOM node, put it in a jQuery collection, and then turn its background color red.
The other thing that Alex mentioned in the book, which was still awesome though maybe less immediately useful, was the $x() function. This functions allows you to use XPath to query the DOM for a collection of nodes. And, just like the $N variables, this collection can be used in conjunction with existing page scripts like jQuery:
- $( $x( "//p[ @class= 'intro' ]" ) ).css( "background-color", "gold" );
This would gather up all the P tags that had the class, "intro", put them in a jQuery collection, and then turn their background color gold.
From a technical standpoint, these are really minor tricks; but, I suspect they are the kind of minor tricks that will have a disproportionately huge payoff when put into practice. I can't even tell you how many times I wished that I could reference the last-selected DOM node; and to think, all this time, that functionality was already baked right into Firebug.
Reader Comments
Awesome tip Ben! I like you have used Firebug for years and had no idea about this console functionality. Thanks!
@Brian,
My pleasure! When I was reading the book and saw this section, I think I literally said something out loud like, "Holy cow!" I couldn't believe it :)
Tangentially, Remy Sharp's "Debugging Tools" video recently gave me some a-ha moments about Firebug:
http://jqueryfordesigners.com/debugging-tools/
@WebManWalking,
That link looks awesome - thanks for sharing.
And best of all those tips work in chrome's console. Nice one Ben!
There's more in Firebug's Command Line API http://getfirebug.com/wiki/index.php/Command_Line_API.
Also, you should check the Chrome Dev Tools presentation given by Paul Irish and Pavel Feldman this year at Google I/O http://www.youtube.com/watch?v=N8SS-rUEZPg.
@Ben
@Edy
Thanks for this tip!
$x(xpath, context) is also present in Chrome Dev Tools. And... $N too :)
Personally, since I have upgraded Firefox to FF4, I stopped to use Firebug. I was tired of crashes, lags of FF...
It's been a while that I use Chrome Tools instead Firebug.
That's remind me that I never finished the Paul Irish's video: http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/
@Loic
Paul Irish is the Man :)
http://vimeo.com/5954529
@Michael,
Nice - that's good to know. In the book, Alex eluded that it worked in most consoles; but, I never got around to checking that. For me, Firebug is just the cat's pajamas.
@Edy,
It's got some really cool stuff, right?! Thanks for the presentation link, I'll check it out. In my experience a Paul Irish presentation is always good.
@Loic,
I do love Firebug, but I will grant you that: Firebug will definitely slow down your machine after a while. If I'm doing a LOT of JavaScript debugging, I'll probably restart my Firefox at some point, just to let it come to zero for a bit.
solved big problem thanks
