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

Question

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

在这种情况下，它是body > div#divsinglecolumnwidth.singlecolumnwidth > div#productdescription>h2。

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

Answer 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"]

资源

Answer 2

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

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

Answer 3

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

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

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