'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?

cssgoogle-chromegoogle-chrome-devtools


Solution 1:[1]

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

chrome tools

(only just realised myself :P )

Solution 2:[2]

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.

Solution 3:[3]

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).

Solution 4:[4]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TimoSolo
Solution 2 Rob W
Solution 3
Solution 4 jonathanbell

Related Questions