Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 438
Jo Liss Avatar asked Nov 17 '11 20:11

Jo Liss


People also ask

How do I show CSS in Chrome inspect?

Press Ctrl + Shift + i for Windows/Linux (or command + option + i for Mac). Right-click on an element on your website page and select Inspect. Now that you are familiar with accessing Google Chrome Developer Tools, you will be able to inspect CSS elements to modify them live.

How do I get the CSS code for inspect element?

First, hover over the element you want to copy. Then, right-click on it and choose the option “Inspect”. On the left side is the HTML DOM tree, and on the right side, the CSS styles of the selected element.

Where can I find CSS in DevTools?

Click on the three vertical dots located on the top-right of Chrome dev tools. Select "More Tools" from the drop-down menu. You'll discover a variety of options when you click "More Tools." From the various options, select the CSS overview feature.


1 Answers

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

chrome tools

(only just realised myself :P )

like image 185
TimoSolo Avatar answered Oct 19 '22 07:10

TimoSolo