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
Written by Marcelo Waisman
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Chrome
Authors
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
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#