Skip to main content
Ben Nadel at cf.Objective() 2009 (Minneapolis, MN) with: Jean Ducrot
Ben Nadel at cf.Objective() 2009 (Minneapolis, MN) with: Jean Ducrot

Awesome Tips For Using Firebug To Navigate And Augment The DOM

By
Published in — Comments (10)

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.

Want to use code from this post? Check out the license.

Short link: https://bennadel.com/2202

Reader Comments

15,848 Comments

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

15,848 Comments

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

Oh my chickens, this post is old!
I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
— Ben Nadel