javascript - Web Developer mode in Chrome or Firefox: how to get an object's CSS full selector?

Question

When I have the Web Developer tool open and inspecting a page, sometimes I wish to select an element and copy (i.e. grab the entire text) of its CSS selector.

I mean this:

For some reason the text in that box is not selectable, and right click shows no menu or options.

Is there a way to grab or export that text so I can process it in my code?

question from:https://stackoverflow.com/questions/65832064/web-developer-mode-in-chrome-or-firefox-how-to-get-an-objects-css-full-selecto

Answer 1

Right-click the element in the inspector, choose the Copy submenu, and each browser gives you slightly different options:

• Chrome gives you the option to copy the selector, which produces a somewhat optimized but still fairly long selector that will uniquely identify the element.

• Firefox gives you two options: "CSS Selector" that functions mostly the same as Chrome but gives you a much more optimized selector, and "CSS Path" that gives you the same as what you're pointing to in your screenshot, the entire path to that element starting from the root. "CSS Path" is designed for web testing tools but it's probably excessive for most other use cases, which I'm guessing is why Chrome doesn't have a similar feature.