web-dev-qa-db-ja.com

Google Chrome開発者ツールでCSSパスをコピー

Google Chromeのデベロッパーツールでは、選択した要素のCSSパス（またはその大部分）がツールバーの下部に表示されます。 Firebugでは、CSSパス内の任意のセレクターを右クリックして、CSSパスをその要素まで取得できます。 Google Chromeこの機能はありますか？組み込みのサポートがない場合、どのツールを利用できますか？

Chrome CSS Path

javascriptcssgoogle-chromeweb-developer-toolbar
26
MattDiamant

Chromeがこのオプションを更新しました

chrome最近の更新後、このオプションは
(right click on the element in Elements Window) > Copy CSS path
から：
(right click on the element in Elements Window) > Copy > Copy selector

15
Ali Arslan

メインのソースウィンドウで要素を右クリックし、[CSSパスをコピー]をクリックします。再コーディングできないページで作業しなければならない場合、これは命の恩人でした。

4
Erik

Chromeにはないので、人々はchrome拡張機能、ブックマークレット、およびChromeのためのその他のツールを作成して、この機能を複製しています。

重複の可能性： Firefox Firebug CSS選択パスと同等のChrome

ブックマークレット： http://www.selectorgadget.com/

Chrome拡張機能： https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

Chromeでこれを適切に処理する方法について、他の人の回答、提案、およびヒントが欲しいのですが。

4
MattDiamant

以下は、CSSパスを与える小さな（CoffeeScript）スニペットです（最初のid要素まで-ブレーク部分を削除することで簡単に変更できます）。

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 ' > '

すべてのノードに "：nth-​​child"を使用するため、クラス名も取得する場合は変更する必要があります。

2
JussiR