Подробен CSS инспектор на всеки сайт с CSSPeeper за Chrome

Редовният панел Chrome DevTools е луд. Тя позволява на всеки да се потопи дълбоко във всяка страница, за да проучи оформлението на сайта, CSS и дори HTTP заглавки, ако е необходимо.

Можете да направите много неща с CSS инспектора на DevTools. Но няма ясен GUI панел и това е едно нещо, което всеки разработчик би харесал.

Вижте CSSPeeper - безплатно разширение на Chrome, което добавя този инспектор на потребителския интерфейс към браузъра ви. Тя ви позволява да изучавате CSS свойствата на всеки елемент на всяка страница, въпреки че в момента е създаден само за Chrome.

Веднъж инсталиран посетете уеб страница и кликнете върху основния бутон на разширението в лентата за добавки на Chrome. В горната част на уеб страницата се появява нов прозорец с подробности за всеки основен елемент.

Докато разглеждате сайта, можете да кликнете върху всеки елемент, който виждате, с пунктиран контур. Това може да включва бутони, раздели на страници, заглавки, елементи за навигация, които можете да назовете.

От там ще получите цял инспектор с подробности за типографията, избор на цвят и стилове на шрифтове. Това е чудесен начин издърпайте стилове директно от уеб страница без да се вкопчвате сами в CSS кода.

CSSPeeper дори ви позволява изберете съответния цвят с вграден избор за цвят и генератор на цветова схема. Можете да експортирате изображения от страници, да създавате свои собствени цветови схеми и прилагайте ги в собствените си макети с Photoshop или Sketch.

Аз преди всичко препоръчваме това разширение за дизайнерите вместо разработчици, тъй като това е много по-дизайнерски приятелски плъгин, който изтегля суров CSS и превръща кода в лесни за четене парчета данни.

Но този плъгин също може да помогне на разработчиците! Наистина е мощен инструмент за проверка на сайта за всички типове CSS.

Разгледайте началната страница на CSSPeeper, за да научите повече за това, което може да направи. Главната страница включва и връзка към магазина на Chrome, така че можете да инсталирате разширението безплатно и да го извадите за пробно пускане.