9

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

enter image description here

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

Is there a way to copy that "path"?

Zack Yoshyaro
  • 2,056
  • 6
  • 24
  • 46

3 Answers3

8

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

Viktor
  • 2,623
  • 3
  • 19
  • 28
ptoxic
  • 141
  • 1
  • 2
  • Indeed this works though for an element inside an iframe within a page, this solution seems to just find the path till the html node inside the iframe. So to workaround this, I had to execute it twice to get the complete path. Once till the iframe as $0 and then again for the element inside the iframe as $0. – sdm Nov 27 '18 at 05:29
  • Thanks for that solution! Great for **CSS specificity debugging**! A compact xPath shows the ID if possible and a full xPath shows the elements along the path, but not their classes/IDs. Whereas your **crumb path** shows all elements with all their classes and IDs along the path. A great auxiliary tool to determine/debug why a CSS selector matches a particular element on website/webpage/user/mode 1 but not on 2 or X! – porg Mar 06 '23 at 17:40
4

You can open the Inspector, and select the DOM node as displayed in this picture:

1

Do a right-click > copy > copy Selector

You'll get the specific path (just like the one you needed) in case you want to do something in CSS (or other) with that element.

Viktor
  • 2,623
  • 3
  • 19
  • 28
Isadora Martinez
  • 41
  • 3
3

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

You'll get a standard xPath looking like this: //*[@id="copyright"]/a[1]

Simon Boudrias
  • 42,953
  • 16
  • 99
  • 134
  • I wish that was also possible for CSS definitions: http://stackoverflow.com/questions/15369895/google-chrome-copy-css-path-in-developer-tools – showdev Apr 26 '13 at 20:18
  • 2
    Unfortunately, the xPath doesn't include the full path that shows in the bottom bar (not spelled out anyway). I was hoping to have a way of copying that entire path, everything from to the element I inspected. Everything that shows in the dev panel. – Zack Yoshyaro Apr 26 '13 at 22:20
  • 1
    can't believe this does not exist – PEWColina May 29 '17 at 21:31