Awesome Tips For Using Firebug To Navigate And Augment The DOM
Posted May 31, 2011 at 2:39 PM by Ben Nadel
| || || |
| || |
| || || |
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.
- Wanted: Full-Time ColdFusion Developer at Intoria Internet Architects
- Cold Fusion Senior Developer at Edge Information Management
- Back-End Web Developer-Information Technologist at Michigan State University
- ColdFusion Developer at Nonfat Media
- Mid-to-Senior Level Web Application Developer at SiteVision, Inc.
Awesome tip Ben! I like you have used Firebug for years and had no idea about this console functionality. Thanks!
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:
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.
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/
Paul Irish is the Man :)
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.
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.
solved big problem thanks