Last Updated: February 25, 2016
·
5.756K
· 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

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside