Code Coverage testuje każdy selektor w każdym czytelnym arkuszu stylów w porównaniu z aktywną stroną, dzięki czemu można zobaczyć, które reguły CSS obecnie do niczego nie pasują, ile bajtów marnuje każdy plik i które skrypty wstrzymują pierwsze malowanie.
Arkusze stylów tylko rosną. Pojawia się motyw z regułami dla stron, których nie masz, framework zawiera komponenty, których nigdy nie używasz, a trzy przeprojektowania później nikt nie jest pewien, która połowa pliku jest nośna. Rezultatem jest CSS, który kosztuje każdą przepustowość odwiedzającego i czas renderowania, aby dostarczyć reguły, z których strona nie może skorzystać.
Code Coverage mierzy to bezpośrednio. Przechodzi przez każdą regułę w każdym arkuszu stylów, który przeglądarka pozwoli mu przeczytać — łącznie z regułami zagnieżdżonymi w zapytaniach o media, blokach @supports i @layer — i testuje każdy selektor względem działającego DOM. Reguła, która w tej chwili nie pasuje do niczego, jest zgłaszana jako nieużywana w każdym pliku, z procentem, zmarnowanymi bajtami i pełną listą selektorów, które możesz rozwinąć i skopiować.
Uważa na oczywiste pułapki. Pseudoelementy i pseudoklasy stanu są usuwane przed dopasowaniem, więc reguła :hover lub ::before jest oceniana na podstawie tego, czy jej selektor podstawowy istnieje, a nie na podstawie błędnego zapisywania. Arkusze stylów udostępniane między źródłami bez nagłówków CORS nie mogą zostać odczytane przez żaden skrypt, dlatego są oznaczane jako nieczytelne, a nie dyskretnie liczone jako doskonałe. A ponieważ skanowanie odzwierciedla stan strony w danym momencie, reguły dotyczące menu, kart i modułów modalnych, które nie są jeszcze otwarte, będą wyglądać na nieużywane — więc otwórz je i naciśnij przycisk Skanuj ponownie, zanim cokolwiek usuniesz.
Zakładka JavaScript odpowiada na inne pytanie: wagę i blokowanie. Inwentaryzuje każdy skrypt ładowany przez stronę, uwzględniając jego rozmiar transferu, czas pobierania oraz to, czy jest to asynchroniczny, odroczony, moduł, ładowany dynamicznie czy wstrzymujący pierwsze malowanie, a następnie sumuje liczbę blokowanych bajtów. Celowo nie jest sprzedawany jako pokrycie wykonania — wiedza o tym, które wiersze JavaScript zostały uruchomione, wymaga interfejsu API debugera przeglądarki Chrome, którego DevSuite Pro nie wymaga, więc nic tutaj nie udaje raportu na poziomie wiersza.
Każda reguła w każdym czytelnym arkuszu stylów jest testowana względem działającego modelu DOM, łącznie z regułami wewnątrz zapytań o media, blokami @supports i @layer — nie są one szacowane na podstawie nazw plików ani rozmiarów.
Każdy arkusz stylów otrzymuje niewykorzystany procent, liczbę reguł wykorzystanych i niewykorzystanych oraz liczbę zmarnowanych bajtów, posortowane tak, aby najgorszy sprawca znajdował się na górze.
Rozwiń dowolny plik, aby przeczytać selektory, które do niczego nie pasują, a następnie skopiuj je jako blok CSS do przejrzenia w edytorze lub przekazania koledze z zespołu.
Pseudoelementy i pseudoklasy stanu, takie jak :hover i :focus-within, są usuwane przed dopasowaniem, więc interaktywne reguły są oceniane sprawiedliwie, a nie skreślane.
Każdy skrypt wymieniony wraz z jego rozmiarem, czasem pobrania oraz informacją, czy jest asynchroniczny, odroczony, modułowy, ładowany dynamicznie czy blokujący pierwsze malowanie – plus łączna liczba bajtów blokujących.
Nieczytelne arkusze stylów pochodzących z różnych źródeł są oznaczane, a nie punktowane, a zakładka JS wyraźnie mówi, że mierzy wagę, a nie to, które linie zostaną wykonane. Żadnych wymyślonych liczb.
Zakupiony motyw zawiera CSS dla dziesiątek układów demonstracyjnych. Sprawdź, ile z nich Twoja witryna nigdy nie wykorzystuje, i opisz plik, opierając się na dowodach, a nie na domysłach.
Sprawdź, ile struktury CSS przetrwa na prawdziwym szablonie i czy konfiguracja czyszczenia lub wstrząsania drzewem robi to, co myślisz.
Wypisz skrypty wstrzymujące renderowanie wraz z ich rozmiarami i zdecyduj, co odłożyć, podzielić lub usunąć, aby szybciej wyświetlić zawartość na ekranie.
Wprowadź liczby: które pliki marnują najwięcej bajtów, ile JavaScript blokuje i gdzie najbardziej opłaca się pierwsza godzina pracy.
Przejmując witrynę, której nie zbudowałeś, szybko przeczytaj, ile elementów CSS i JavaScript wciąż zasługuje na swoje miejsce.
Kliknij ikonę Pokrycie kodu w doku DevSuite Pro. Skanowanie uruchamia się natychmiast i raportuje, ile reguł sprawdziło i jaka część z nich jest niewykorzystana.
Górny wiersz zawiera liczbę arkuszy stylów, całkowitą liczbę reguł, niewykorzystany procent i zmarnowane bajty. Poniższe pliki są uporządkowane według ilości marnowanych odpadów.
Kliknij opcję pokaż nieużywane selektory w dowolnym pliku, aby dokładnie przeczytać, które reguły nie pasują do niczego na tej stronie.
Otwórz menu, karty, akordeony i moduły, a następnie naciśnij opcję Skanuj ponownie. Reguły, których elementy istnieją tylko w tych stanach, zostaną przeniesione z nieużywanych do używanych — zawsze rób to przed usunięciem.
Skopiuj nieużywane selektory, co daje blok CSS do przepracowania; Eksportuj JSON kopiuje pełny raport, w tym spis JavaScript, dla zgłoszenia lub dokumentu audytu.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 71 narzędzi programistycznych dla swojej przeglądarki.
