有没有办法在检查元素后复制出现在 Chrome 开发工具中的路径？

Posted 2023-03-05

【中文标题】有没有办法在检查元素后复制出现在 Chrome 开发工具中的路径？

【英文标题】：Is there a way to copy the path that appears in Chrome's dev tools after Inspecting an Element?

【发布时间】：2013-04-21 02:23:46

【问题描述】：

当您使用 Chrome 选择 Inspect Element 时，在开发者面板的底部，会显示该元素的路径。

在本例中，它是body > div#divsinglecolumnwidth.singlecolumnwidth > div#productdescription>h2。

有没有办法复制那个“路径”？

【参考方案1】：

当您在 DOM 检查器中选择一个元素时，该元素在控制台中变为 $0：

“在控制台中使用 $0 来引用这个元素”

所以您可以简单地转到控制台并粘贴以下内容：

crumb = function(node) 
var idOrClass = (node.id && "#"+node.id) || (""+node.classList && (" "+node.classList).replace(/ /g, "."));
return node.tagName.toLowerCase() + idOrClass;;
crumbPath = function(node) return node.parentNode ? crumbPath(node.parentNode).concat(crumb(node)) : [];;
crumbPath($0);

输出如下所示：

["html", "body.question-page.new-topbar", "div.container._full.", "div#content", "div", "div.inner-content.clearfix", "div#mainbar", "div#question", "div.post-layout", "div.postcell.post-layout--right", "div.post-text", "p"]

Source

【讨论】：

确实这适用于页面内 iframe 内的元素，但此解决方案似乎只是找到 iframe 内 html 节点的路径。所以要解决这个问题，我必须执行两次才能获得完整的路径。一次直到 iframe 为 $0，然后再次为 iframe 内的元素为 $0。

【参考方案2】：

只需右键单击 DOM 节点，然后选择 Copy xPath 选项。

您将获得如下所示的标准 xPath：//*[@id="copyright"]/a[1]

【讨论】：

我希望 CSS 定义也能做到这一点：***.com/questions/15369895/…

不幸的是，xPath 不包括底部栏中显示的完整路径（无论如何都没有说明）。我希望有一种方法可以复制整个路径，从 到我检查的元素的所有内容。开发面板中显示的所有内容。

不敢相信这不存在

【参考方案3】：

您可以打开 Inspector，然后选择如图所示的 DOM 节点：

右键单击 > 复制 > 复制选择器

如果您想在 CSS（或其他）中对该元素执行某些操作，您将获得特定路径（就像您需要的路径一样）。