Menu
I want to be able to select/highlight an element on the page and find its selector like this:
div.firstRow div.priceAvail>div>div.PriceCompare>div.BodyS
I know you can see the selection on the bottom after doing an inspect element, but how can I copy this path to the clipboard? In Firebug I think you can do this, but don't see a way to do this using the Chrome Developer Tools and search for an extension did not turn-up anything.
This is what I am trying to do for more reference: http://asciicasts.com/episodes/173-screen-scraping-with-scrapi
313
Press F12 to open up Chrome DevTools. Elements panel should be opened by default. Press Ctrl + F to enable DOM searching in the panel. Type in XPath or CSS selectors to evaluate.
On Chrome's Developer Tools tab (CTRL + SHIFT + I), go to Resources (you may have to enable Resource tracking on that page), and click on the sub-tab Stylesheets. That will show all css files loaded by that page.
If Chrome Dev tools if you select the element in the source pane and right click, then you will see the "Copy CSS Path" option. In newer versions of Chrome, this is (right-click) > Copy > Copy selector .
Press F12 to open Chrome Developer Tool. In "Elements" panel, press Ctrl + F. In the search box, type in XPath or CSS Selector, if elements are found, they will be highlighted in yellow.
If Chrome Dev tools if you select the element in the source pane and right click, then you will see the "Copy CSS Path" option.
In newer versions of Chrome, this is (right-click) > Copy > Copy selector.
You can also get the XPath with (right-click) > Copy > Copy XPath
82
Although not an extension, I did find a bookmarklet called Selector Gadget that does exactly what I was looking for.
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
