Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Chrome copy CSS Path in Developer Tools

Google Chrome's Developer Tools shows the CSS path (or a large portion of it) of the selected element at the bottom of the toolbar. In Firebug, you are able to right-click on any selector in the the CSS Path, and grab the CSS Path up to that element. Does Google Chrome have this feature? What tools are available if there is no built-in support?

Chrome CSS Path

like image 721
MattDiamant Avatar asked Mar 12 '13 19:03

MattDiamant


People also ask

How do I find my CSS path in Chrome console?

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.

How do I save CSS changes of styles panel of Chrome Developer Tools?

To save your changes, press CTRL + S when editing the file.

How do I find my CSS path?

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 .


Video Answer


2 Answers

Chrome has updated this option

In chrome after recent update this option has been changed from
(right click on the element in Elements Window) > Copy CSS path
to :
(right click on the element in Elements Window) > Copy > Copy selector

like image 73
Ali Arslan Avatar answered Sep 19 '22 14:09

Ali Arslan


Chrome doesn't have it, so people have made chrome extensions, bookmarklets, and other tools for Chrome to replicate this functionality.

Possible duplicate: Chrome equivalent of Firefox Firebug CSS select path

Bookmarklet: http://www.selectorgadget.com/

Chrome Extension: https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

I would still like other people's answers, suggestions, and tips on how to best deal with this in Chrome.

like image 39
MattDiamant Avatar answered Sep 19 '22 14:09

MattDiamant