Analizuj kody dowolnej witryny za pomocą rozszerzenia CSS Dig Chrome

Jest wiele rzeczy, które możesz zrobić Chrome DevTools od edycji stron internetowych na żywo do studiowania szczegółowych żądań HTTP. Ale umiejętność analizowania wzorców CSS nie jest upieczony w konsoli.

Z CSS Dig, możesz analizować wszystko Selektory CSS, specyficzność, i unikalne właściwości dowolnej strony internetowej bezpośrednio z Chrome. To rozszerzenie jest całkowicie bezpłatne i oferuje dużą moc programistom frontendowym.

Podczas przeglądania arkusza stylów otrzymasz wiele danych z panelu Dig CSS. Może ci to pokazać indywidualne selektory, włącznie z duplikaty i niepotrzebne poziomy specyficzności.

Aby zacząć, po prostu zainstaluj wtyczkę i otwórz okno konsoli. Znajdziesz dwie zakładki w oknie Dig CSS: Nieruchomości i Selektory.

Możesz przeglądać wyniki zorganizowane według właściwości (kolor, obramowanie, dopełnienie) lub według selektorów (klasy, identyfikatory). Uważam, że okno Właściwości jest najbardziej wartościowe, ponieważ umożliwia badanie używanych czcionek i kolorów.

To narzędzie działa we wszystkich witrynach, więc jest również przydatne inżynieria odwrotna czyjaś konstrukcja. Możesz skopiować / wkleić CSS bezpośrednio z tego okna i użyć go ponownie na własnych projektach.

Prawdopodobnie najczęstszym przypadkiem użycia CSS Dig jest wyczyść duplikaty kolorów z twojej palety kolorów. Ile unikalnych odcieni zieleni naprawdę potrzebujesz? Albo, ile różnych czcionek bezszeryfowych jest potrzebnych na jednej stronie?

CSS Dig jest niewiarygodnie prosty, więc nie oczekuj kilkudziesięciu funkcji, takich jak DevTools. Zamiast tego ta wtyczka jest raczej nastawiony na programistów frontendowych strony kontrolne dla powtarzających się selektorów lub duplikatów właściwości.

The kod źródłowy wtyczki jest dostępna za darmo na GitHub, gdzie znajdziesz również wszystkie najnowsze aktualizacje.