How can I grab all css styles of an element?

UPDATE: As @tank answers below, Chrome version 77 added "Copy Styles" when you right-click on an element in the devtools inspector.

---

Using Javascript worked best for me. Here's how I did it:

1. Open Chrome DevTools console.

2. Paste this dumpCSSText function from this stack overflow answer into the console, and hit Enter:

   function dumpCSSText(element){
     var s = '';
     var o = getComputedStyle(element);
     for(var i = 0; i < o.length; i++){
       s+=o[i] + ':' + o.getPropertyValue(o[i])+';';
     }
     return s;
   }
   

3. When using Chrome, you can inspect an element and access it in the console with the $0 variable. Chrome also has a copy command, so use this command to copy ALL the css of the inspected element:

   copy(dumpCSSText($0));
   

4. Paste your CSS wherever you like! 🎉

open Firefox, install Firebug right click on the element you want, choose Inspect element and then open the Computed area

you will have ALL STYLES applied to that element

This is valid in Chrome, Safari, Opera and IE with their own development tools

Opera (DragonFly is already installed with Opera)

Firefox (Needs FireBug plugIn)

Internet Explorer (Needs IE Developer Toolbar plugin)

Chrome & Safari (Web Inspector is already part of Chrome and Safari)

Chrome 77 now has Copy styles in the Context menu on the Inspect Element tab.

Right click on the Element > Inspect > Right click on the element in the opened Elements tab > Copy > Copy styles