CODEWITHSUNDEEP
javascriptcssgoogle-chromeweb-developer-toolbar
MattDiamant
MattDiamant

Reputation: 8771

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

Upvotes: 33

Views: 36502

Answers (4)

MattDiamant
MattDiamant

Reputation: 8771

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.

Upvotes: 6

Ali Arslan
Ali Arslan

Reputation: 1047

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

Upvotes: 29

Erik
Erik

Reputation: 104

You can right click on the element in the main source window and "Copy CSS path". This has been a life saver when I have to work on pages that I can't re-code.

Upvotes: 6

JussiR
JussiR

Reputation: 2065

Here is a small (CoffeeScript) snippet that will give CSS path (up to first id element - though you can easily change that by removing the break part):

getCSSPath = (node)->
  parts = []
  while node.parentElement
    str = node.tagName
    if node.id
      str += "##{node.id}"
      parts.unshift str
      break
    siblingsArr = Array.prototype.slice.call(node.parentElement.childNodes)
    ind = siblingsArr.filter((n)-> n.attributes?).indexOf(node)
    parts.unshift str + ":nth-child(#{ind + 1})"
    node = node.parentElement
  parts.join ' > '

Uses ":nth-child" for every node, so you need to modify it if you'd like to get also class names.

Upvotes: 2

Related Questions