Best Firefox/Chrome Plugin to view source?

Question

I find myself seeing things like buttons, inputs, header, ect. and wanting the code so I can reference off them and make my elementary designs look better. I always try to change it up a bit, I don't like stealing other peoples designs.

Viewing the page source from just the browser is very sloppy and usually hard to read. I tried using Firebug but I noticed one huge problem. It doesn't show all the CSS.

Example
Firebug will only show:

box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);  

When the full code is:

box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);  
-webkit-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);  
-moz-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);  

If leaves out the moz and webkit.

Answer 1

I can speak with experience in the Chrome Inspect tool, when debugging the page elements the browser automatically ignores and does not show the invalid properties or styles, but if you look at the actual page source code (or the css) your styles will be there.

I think that if Firebug does not show those styles it means Firefox is ignoring them, in this case you are using the -moz-box-shadow but Firefox uses box-shadow to render the element.

Answer 2

download the latest version of any browser and you see absolutely all the css.

With Inspector in Chrome you can see even the different states like :hover :active and so on

Answer 3

Why not just use the inspect element that's built in to Chrome? I use it every day of my life and love it.

I also use "stylebot" to show me some styles of websites, but I only use that to style websites (clientside) that I feel need a bit of fixing, like making buttons bigger, etc.