2
votes

In FireBug on 'normal' Firefox, with the FireBug console open you could right-click an element and "Copy CSS Path".

I used to use this all the time to get unique CSS Selectors for writing my CSS.

This option isn't available in the FireFox Developer Edition (with integrated FireBug), so is there another way to get this info to my clipboard?

EDIT:
I know there is a right-click > copy > Css Selector, but that gives me:

#widget-column-16 > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > p:nth-child(1)

when what I want is: #widget-column-16 .div-name .div-name .div-name .div-name p

2

2 Answers

2
votes

Rightclick on the element -> copy -> css-selector

Are you looking for this?

0
votes

I miss "Copy CSS Path" as well, and I wish that Firefox Developer Tools would introduce it as an option to their tool set.

It was a fantastic tool, and I'm still trying to figure out how to replace it.

The only workaround I have found so far is to use Google Chrome's Inspect. It offers a right-click > Copy > Copy Xpath option.

Copy Xpath doesn't make a nice, clean CSS path like "Copy CSS Path" did, so you have to do some editing to remove slashes and tidy it up a bit.

It also doesn't include classes or identifiers, which is a bummer.

But at least it gives you a way to quickly copy the whole path starting with "html body div" etc.