Google Chrome copy CSS Path in Developer Tools

javascript css google-chrome web-developer-toolbar
MattDiamant picture MattDiamant · Mar 12, 2013 · Viewed 30.3k times · Source

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

Answer

Ali Arslan picture Ali Arslan · Feb 15, 2016

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

Related questions

Force DOM redraw/refresh on Chrome/Mac

Every once in a while, Chrome will render perfectly valid HTML/CSS incorrectly or not at all. Digging in through the DOM inspector is often enough to get it to realize the error of its ways and redraw correctly, so …

Read More
"Uncaught TypeError: a.indexOf is not a function" error when opening new foundation project

I've created a new Foundation 5 project through bash, with foundation new my-project. When I open the index.html file in Chrome an Uncaught TypeError: a.indexOf is not a function error is shown in the console, originating in jquery.min.…

Read More
How can I remove the "No file chosen" tooltip from a file input in Chrome?

I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox). Please notice that I'm talking not about the text inside the input field, but …

Read More