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() 2010 (Minneapolis, MN) with:

Awesome Tips For Using Firebug To Navigate And Augment The DOM

Posted 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!

Reply to this Comment

@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 :)

Reply to this Comment

@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.

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.