Is there a way to copy the path that appears in Chrome's dev tools after Inspecting an Element?

Question

When you select Inspect Element with Chrome, at the bottom of the Developer's panel, a path to that element is shown.

In this instance, it was body > div#divsinglecolumnwidth.singlecolumnwidth > div#productdescription>h2.

Is there a way to copy that "path"?

Answer 1

When you select an element in the DOM inspector, that element becomes $0 in the console:

"Use $0 in the console to refer this element"

So you can simply go to the console and paste the following:

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);

The output looks like this:

["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