Geek asks and answers

Is there a way to copy the path that appears in Chrome dev tools after checking the item?

When you select Inspect Elementwith Chrome, the path to this item is displayed at the bottom of the developer panel.

enter image description here

In that case it was body > div#divsinglecolumnwidth.singlecolumnwidth > div#productdescription>h2.

Is there any way to copy this "path"?

+7
source share
3 answers

Just right click on the DOM node and select Copy xPath.

You will get a standard xPath similar to this: //*[@id="copyright"]/a[1]

+4
source

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

"Use $ 0 in the console to reference this item"

So you can just 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);

:

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

+4

You can open the Inspector and select the DOM node, as shown in the following figure:

1

Click > > > > Copy selector

You will get a specific path (exactly the one you need) in case you want to do something in CSS (or another) with this element.

+1
source

More articles:


All Articles