Инструменты разработчика Chrome: проверить предварительно проверенный CSS

Question

Если вы хотите взглянуть на CSS сайтов других людей (чтобы украсть учиться у них), Firebug позволяет вам проверять предварительно проверенный CSS:

Но в Chrome 16 вы получаете только уменьшенный CSS, как он был обслужен:

Есть ли способ получить Chrome для предварительной настройки CSS?

Answer 1

В более новых версиях есть кнопка «формат», которая преобразует источник:

(только себя осознал: P)

Answer 2

Консоль разработчика показывает файл как обслуживаемый. Если вам нужна удобочитаемая версия, скопируйте и вставьте код в http://www.codebeautifier.com/.

Если вы используете вкладку Элементы, применяемые свойства CSS также отображаются для каждого элемента.

Answer 3

Вы можете оформить заказ Pretty Print: https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg?hl=en

После установки при просмотре минимизированного файла CSS или JS он (через мгновение) будет выглядеть не минимизированным.

Answer 4

Я рекомендую Quick Source Viewer , который является расширением для Chrome и не требует вставки копий человеком (действует как дополнительный инструмент разработчика Chrome).Он может показать вам источник текущей страницы, отформатированный и закодированный цветом.

Это довольно мощный инструмент, показывающий все «источники» страницы, будь то CSS, JS или HTML.Даже такие вещи, как встроенные css / js, можно просматривать по отдельности (выделенный код подсвечивается).И самое приятное то, что все они преобразуются, даже CSS (что инструменты разработчика Chrome до сих пор отказываются делать).