谷歌浏览器在开发者工具中复制 CSS 路径

Posted 2023-02-19

【中文标题】谷歌浏览器在开发者工具中复制 CSS 路径

【英文标题】：Google Chrome copy CSS Path in Developer Tools

【发布时间】：2013-02-28 11:27:52

【问题描述】：

Google Chrome 的开发者工具在工具栏底部显示所选元素的 CSS 路径（或其中的大部分）。在 Firebug 中，您可以右键单击 CSS 路径中的任何选择器，然后将 CSS 路径抓取到该元素。谷歌浏览器有这个功能吗？如果没有内置支持，有哪些工具可用？

【问题讨论】：

可能这就是答案 [Chrome 复制 csspath][1] [1]：***.com/questions/17292794/css-query-generation-apis/…

这提供了足够的路径让它成为一个独特的元素，但我更多的是寻找整个 CSS 路径。不过谢谢！

正确答案：***.com/a/35412554/242933

【参考方案1】：

Chrome 已更新此选项

在最近更新后的 chrome 中，此选项已从 (right click on the element in Elements Window) > Copy CSS path 更改 至：(right click on the element in Elements Window) > Copy > Copy selector

【参考方案2】：

Chrome 没有它，因此人们为 Chrome 制作了 chrome 扩展程序、书签和其他工具来复制此功能。

可能重复： Chrome equivalent of Firefox Firebug CSS select path

书签： http://www.selectorgadget.com/

Chrome 扩展程序： https://chrome.google.com/webstore/detail/lbghbpofdlcecfbpjgmffnkieenjkboi

我仍然希望得到其他人的回答、建议和提示，了解如何在 Chrome 中以最佳方式处理此问题。

【讨论】：

我同意，最好能够复制它，因为它已经构建好了，而且它们还提供从同一个地方复制 xpath 和 html 的能力。为此要求扩展是很愚蠢的。

“或者，我可以更好地学习谷歌”。我已经数不清有多少次在 Google 上搜索有关编程相关问题的帮助，但只找到了诸如“学习使用 Google”之类的不屑一顾的 QA 回复。感谢您也提供有用的答案:)

【参考方案3】：

您可以右键单击主源窗口中的元素和“复制 CSS 路径”。当我必须处理无法重新编码的页面时，这可以挽救生命。

【讨论】：

这不是 OP 要求的。

OP（任何我自己）正在寻找比“复制 CSS 路径”提供的路径更长的路径（参见发布的图片底部）

【参考方案4】：

这是一个小的（CoffeeScript）sn-p，它将提供 CSS 路径（直到第一个 id 元素 - 尽管您可以通过删除 break 部分轻松更改它）：

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”，所以如果你想获得类名，你需要修改它。