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

Question

当您选择Inspect ElementChrome时,在Developer's面板的底部会显示该元素的路径.

在这种情况下,它是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 节点，如下图所示：

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

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

Answer 3

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

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