Last Updated: February 25, 2016
·
5.427K
· marcelo

Tip: selecting elements in Chrome developer tools and in Firebug

First Tip: Selecting an inspected element using javascript from the console

$0;
console.log($0.id);

Actually google chrome can remember the last five inspected elements (firebug remembers the last two):

$0; // most recent
$1;
$2;
$3;
$4;
$5;

Second Tip: Selecting elements using xpath from the console:

It work's nicely with html and xml documents

While in the console of Chrome developer tools or Firebug we can write down:

$x('xpath expression'); // returns an array of results

Examples:

select the body element:

$x('//body'); //equivalent to "body" selector in css

selecting all images that are direct childs of a div

$x('//div/img'); //equivalent to "div > img" selector in css

selecting all the elements with class equals something

$x('//*[@class="something"]');

Well you get the idea...

Beside being a very useful tool to debug elements it's a very comfortable way to learn and practice xpath