12

I've made the move to Chrome, but one of the most annoying features with 'Firebug lite' is that it doesn't allow you to copy the CSS path of objects.

To see what I mean, in Firefox, go to google.com and inspect the logo with Firebug. Right click on the 'hplogo' div and pick 'Copy CSS path'. You'll get something like:

html body#gsr div#main span#body.ctr-p center div#lga div div#hplogo

This is an incredibly useful feature that I can't find on Chrome, it appears you can only copy the Xpath.

Is there a way to use this type of functionality in Chrome?

Thanks

Phill
  • 546
  • 1
  • 5
  • 16
  • 1
    "incredibly useful" ...how so? – wdm Jul 12 '12 at 00:27
  • Just a note - check the reviews of the app in the app store. Several posters mention issues with being able to copy the XPath and CSSPath. I'm a Mac user, just installed the app, was happy to see pathing, and sad to be unable to copy the path. Your mileage may vary. –  Dec 13 '12 at 20:35
  • that's why I haven't switched to Chrome yet myself – Christopher May 10 '13 at 12:18
  • this is indeed a big minus for chrome. @wdm it is incredibly useful, when you have to change big websites that you did not build and you have very little time in firefox you just copy the selector and make the changes, you don't have to lose time trying to understand everything that is in the website. – Claudiu Creanga Dec 06 '13 at 09:00
  • @Claudiu sounds more like it's supporting bad habits, especially if you're using a css preprocessor such as LESS or Sass. The next person to come along is going to have to understand what css rules you hacked on top of the original. – wdm Dec 07 '13 at 00:42

2 Answers2

6

In chrome you can right click on an element in the elements explorer view and select copy CSS path or copy Xpath.

Richard Turner
  • 423
  • 4
  • 12
4

There is no native way to get this information in Chrome. You can do a bunch of hacks, using jQuery and bookmarks as show here: http://www.edmondscommerce.co.uk/chrome/tip-copy-css-selector-in-chrome/ as well as here: http://www.selectorgadget.com/

However, you may find this extension to be closer to what you want, and a little easier to use: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi It will pull the XPath as well as the CSS Path, and allow you to easily copy the text.

radicalpi
  • 907
  • 1
  • 9
  • 29