Szczegółowy inspektor CSS na każdej stronie z CSSPeeper dla Chrome

Regularny panel Chrome DevTools jest szalony. Pozwala każdemu zanurzyć się głęboko na dowolnej stronie, aby w razie potrzeby zbadać układ strony, CSS, a nawet nagłówki HTTP.

Możesz wiele zrobić dzięki inspektorowi DevTools CSS. Ale nie ma wyraźnego panelu GUI i to jest jedna rzecz, którą pokochałby każdy programista.

Sprawdź CSSPeeper, bezpłatne rozszerzenie Chrome, które dodaje tego inspektora GUI do przeglądarki. Pozwala to na badanie właściwości CSS dowolnego elementu na dowolnej stronie, chociaż teraz jest on zbudowany tylko dla Chrome.

Po zainstalowaniu po prostu odwiedź stronę i kliknij główny przycisk rozszerzenia w pasku dodatków Chrome. Nowe okno inspektora pojawi się na górze strony ze szczegółami na temat każdego głównego elementu.

Przeglądając witrynę, możesz kliknąć dowolny element z kropkowanym konturem. Może to obejmować przyciski, sekcje strony, nagłówki, elementy nawigacyjne, które chcesz nazwać.

Stamtąd otrzymasz całego inspektora ze szczegółami dotyczącymi typografii, wyboru kolorów i stylów czcionek. To świetny sposób na ściągaj style bezpośrednio ze strony internetowej bez wnikania w kod CSS.

CSSPeeper pozwala nawet wybierz pokrewne kolory za pomocą wbudowanego selektora kolorów i generator schematu kolorów. Możesz eksportować obrazy ze stron, budować własne schematy kolorów i zastosuj je do własnych makiet z Photoshopem lub Szkicem.

Ja przede wszystkim polecam to rozszerzenie dla projektantów zamiast programistów, ponieważ jest to bardziej przyjazna dla projektanta wtyczka, która pobiera surowy CSS i przekształca kod w łatwe do odczytania fragmenty danych.

Ale ta wtyczka może również pomóc programistom! To naprawdę potężne narzędzie do kontroli witryny dla wszystkich typów CSS.

Spójrz na stronę główną CSSPeeper, aby dowiedzieć się więcej o tym, co może zrobić. Strona główna zawiera również link do sklepu Chrome, dzięki czemu możesz zainstalować rozszerzenie bezpłatnie i wyjąć go na próbne uruchomienie.