CODEWITHSUNDEEP
cssgoogle-chromegoogle-chrome-devtools
Jo Liss
Jo Liss

Reputation: 33144

Chrome Developer Tools: inspect prettified CSS

If you want to look at the CSS of other people's websites (to steal learn from them), Firebug lets you inspect the prettified CSS:

Firebug

But in Chrome 16, you only get the minified CSS as it was served out:

Chrome

Is there a way to get Chrome to prettify the CSS?

Upvotes: 11

Views: 8452

Answers (4)

TimoSolo
TimoSolo

Reputation: 7325

In the newer versions there is a "format" button that prettifies the source:

chrome tools

(only just realised myself :P )

Upvotes: 27

jonathanbell
jonathanbell

Reputation: 2637

You may want to checkout Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en

After installing, when you view a minified CSS or JS file, it will appear (after a moment) un-minified.

Upvotes: 0

Hashbrown
Hashbrown

Reputation: 13023

I recommend Quick Source Viewer, which is an extension to chrome and requires no human copy-pasting (acts sort of like an extra chrome dev-tool). It can show you the source of the current page formatted and colour coded.

It's pretty powerful, showing all 'sources' of the page, be it css, js or html. Even things like inline css/js can be viewed individually (with injected code highlighted). And the best part is it prettifies all of them, even the css (which chrome's dev tools still refuses to do).

Upvotes: 0

Rob W
Rob W

Reputation: 349252

The Developer's console shows the file as served. If you want a human-readable version, copy-paste the code to http://www.codebeautifier.com/.

If you use the Elements tab, the applied CSS properties are also shown per element.

Upvotes: 2

Related Questions