Pokrycie: znajdowanie nieużywanego kodu JavaScript i CSS

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Panel Pokrycie pomaga znaleźć nieużywany kod JavaScript i CSS. Usunięcie nieużywanego kodu może przyspieszyć wczytywanie strony i zaoszczędzić dane mobilne użytkowników.

Analizowanie pokrycia kodu.

Omówienie

Przesyłanie nieużywanego kodu JavaScript lub CSS jest częstym problemem w programowaniu stron internetowych. Załóżmy na przykład, że chcesz użyć na stronie komponentu przycisku Bootstrap. Aby użyć komponentu przycisku, musisz dodać do kodu HTML link do arkusza stylów Bootstrap, na przykład w ten sposób:

...
<head>
  ...
  <link rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
        crossorigin="anonymous">
  ...
</head>
...

Ta szata graficzna nie zawiera tylko kodu komponentu przycisku. Zawiera ona kod CSS dla wszystkich komponentów Bootstrapa. Nie używasz jednak żadnych innych komponentów Bootstrap. Twoja strona pobiera więc mnóstwo niepotrzebnych plików CSS. Ten dodatkowy kod CSS stanowi problem z tych powodów:

  • Dodatkowy kod spowalnia wczytywanie strony. Zobacz CSS blokujący renderowanie.
  • Jeśli użytkownik otworzy stronę na urządzeniu mobilnym, dodatkowy kod wykorzysta jego dane mobilne.

Panel Pokrycie umożliwia nagrywanie strony i wyświetlanie raportu o łącznej liczbie użytych i nieużytych bajtów zasobów CSS i JavaScriptu. Można też śledzić kod w panelu Źródła.

Otwieranie panelu Zasięg

  1. Otwórz Narzędzia dla deweloperów.
  2. Otwórz menu poleceń.

  3. Zacznij wpisywać coverage, wybierz polecenie Pokaż zasięg, a następnie naciśnij Enter, aby je uruchomić. W panelu otworzy się panel Pokrycie.

    Panel Pokrycie.

W prawym górnym rogu kliknij more_vert Więcej opcji > Więcej narzędzi > Zasięg.

Rejestrowanie pokrycia kodu

Aby zarejestrować pokrycie kodu:

  1. Aby ustawić zakres pokrycia, na pasku działań u góry panelu Pokrycie wybierz Na poziomie funkcji lub Na poziomie bloku z listy rozwijanej.

  2. Aby rozpocząć nagrywanie, kliknij Rozpocznij instrumentację pokrycia i załaduj ponownie stronę. Panel Pokrycie ponownie wczytuje stronę, rejestruje kod potrzebny do jej załadowania i kontynuuje nagrywanie, gdy będziesz z nią wchodzić w interakcje.

  3. Aby zatrzymać nagrywanie pokrycia kodu, kliknij Zatrzymaj instrumentację i pokaż wyniki.

Analiza pokrycia kodu

Tabela w panelu Pokrycie zawiera informacje o tym, które zasoby zostały przeanalizowane i ile kodu jest używane w każdym z nich.

Kliknij wiersz, aby otworzyć zasób w panelu Źródła i zobaczyć poszczególne wiersze kodu użytego i nieużytego. Niewykorzystane wiersze kodu są oznaczone czerwonymi liniami obok kolumny z numerami wierszy po lewej stronie.

raport pokrycia kodu;

  • Kolumna URL to adres URL zasobu, który został przeanalizowany.
  • W kolumnie Typ widać, czy zasób zawiera kod CSS, JavaScript czy oba te elementy.
  • Kolumna Łączny rozmiar w bajtach to łączny rozmiar zasobu w bajtach.
  • Kolumna Nieużyte bajty zawiera liczbę bajtów, które nie zostały użyte.
  • Ostatnia kolumna bez nazwy to wizualizacja kolumn Łączna liczba bajtów i Niewykorzystane bajty. Czerwona część paska to niewykorzystane bajty. Szara sekcja to wykorzystane bajty.

Aby filtrować raport według adresu URL, określ go w filtrze na pasku działań.

Pasek stanu u dołu panelu Pokrycie pokazuje odsetek wykorzystanego kodu. Pasek stanu uwzględnia filtrowanie.

Obok paska filtra na liście możesz wybrać Wszystko lub tylko CSS albo JavaScript, aby wyświetlić je w raporcie.

Aby uwzględnić kod rozszerzenia w raporcie, zaznacz Skrypty dotyczące zawartości.

Aby wyeksportować raport, kliknij Eksportuj zasięg.