Is there a browser extension to get all the CSS that is applied to a DOM element?

Question

Firebug is great, and allows me to see all the CSS applied to an element in the DOM that you select, but either you can:

a) View it line by line, as defined in the CSS, in the applied order (very useful but not what I'm looking for) or

b) View it "computed", which is all CSS rules and the values that this element has.

What I want is a tool or extension that allows me to select an element and would show me, in copy-pastable form, all the CSS that's been defined for that element. If the element has font-style:normal just because it's the default for that element, I don't want that there (Firebug shows all this in computed view).

Basically I want to be able to:

1. I see an element I'd like to replicate on a website (like a button) exactly in my own website.
2. Use this tool to get a bunch of CSS applied to that element.
3. Paste on my own CSS.
4. Get the same looking element in my website. Yay!

Any ideas?

Answer 1

Google Chrome has tools like Firebug built in called "Chrome Developer Tools". It is extremely powerful from my experience and I switched from Firefox/Firebug to Chrome about a year ago. There are several different ways to get the developer tools up. You can find detailed documentation at https://developers.google.com/chrome-developer-tools/docs/overview

When you have the Chrome developer tools open to the elements tab with an element selected, you can expand the computed styles area on the right and see all styles that make up that element.

If the specific style has an expandable triangle to its left, you can find out what stylesheet and where the styling comes from.