Web Inspector and Firebug element selection trick

So you are inspecting elements via the Web Inspector on Chrome/Safari or the Firebug on Firefox and you wanna play with those elements you just selected in the console.

Normally what you’d do is record the element’s class name or id and use jQuery (let’s assume you’re using jQuery for brevity’s sake) to select it, like this:

$(".github-logo-4x-hover");

But here’s a nice trick to speed this up for you. In both Web Inspector and Firebug you’re allowed to refer to a few previously selected elements with the aliases $0, $1, $2, $3 and $4.

See the example:

Here I select the element:

Now it can be accessed via the Console through the $0 variable:

$0 exactly corresponds the last selected element. $1, $2, $3 and $4 correspond to the other previously selected elements in reverse order.

jQuery, for example, can deal with these variables just well:

$($0).click(function () {
    alert("You have clicked it!");
});

This is a simple trick, but can really help us during our day-to-day software craftsmanship.