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

Question

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

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

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

Answer 1

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

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

Answer 2

在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“]

来源：https://groups.google.com/d/msg/google-chrome-developer-tools/WeRo8aijpYc/IlnGmFa3k3gJ

Answer 3

您可以打开检查器，然后选择此图中显示的DOM节点：

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

如果您想使用该元素在CSS（或其他）中做某事，您将获得特定的路径（就像所需的路径一样）。