Copy selector structure

Showing 1-3 of 3 messages
Copy selector structure Palle Zingmark 10/11/11 5:26 AM

I'm not entirely sure this is the correct forum, so please point me in
the right direction if I'm out of place please. :)

I have a feature that I'm missing (or would like to have, or can't
find any way), in the Chrome Developer Tools and I would like to share
my thought on it so see if I'm the only one. Deal?

Here goes:

When inspecting an element, I get a "breadcrumb" in the Developer Tool
statusbar showing the node path to where that element is in the DOM,
it would be a great asset to be able to right-click on an element in
the breadcrumb node path and be able to select "Copy selector
path" (..or something similar).

This would make writing CSS a lot easier when working on a big website
with long nested DOM structures.

Comments, ideas, feedback on this?

Kind regards / Palle Zingmark
Re: Copy selector structure Tim M 10/11/11 5:01 PM
Given that when you select an item, the DOM object is assigned to the variable $0 in the console, then you could probably write a little bit of javascript to do this - the below isn't terribly efficient and may not be absolutely correct (parentNode, parentElement?? etc) but it broadly does what you want

crumb = function(node) {
    var idOrClass = ( && "#" || (""+node.classList && (" "+node.classList).replace(/ /g, "."));
    return node.tagName.toLowerCase() + idOrClass;
crumbPath = function(node) {
  return node.parentNode ? crumbPath(node.parentNode).concat(crumb(node)) : [];


Give it a try and see if it's good enough - you can then just include it in your own page code or put it in an extension to add it as a method to document if you want etc (assuming Paul Irish doesn't tell us its already provided somewhere)



Re: [Chrome DevTools] Re: Copy selector structure Paul Irish 10/11/11 6:21 PM is a bookmarklet designed for this. Give that a whirl.

That said, code is not very good at determining the best selector for an element, as you might want to group "similar" ones together. Probably too arbitrary to land as a core feature, I'd bet.