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 s

Solution 1:

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

Solution 2:

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.

Solution 3:

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.

Solution 4:

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 strbreak
    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.