Panel Pokrycie pomaga znaleźć nieużywany kod JavaScript i CSS. Usunięcie nieużywanego kodu może przyspieszyć wczytywanie strony i zaoszczędzić użytkownikom dane mobilne.
Przegląd
Wysyłanie nieużywanego kodu JavaScript lub CSS to częsty problem w tworzeniu stron internetowych. Załóżmy na przykład, że chcesz użyć komponentu przycisku Bootstrap na swojej stronie. Aby użyć komponentu przycisku, musisz dodać link do arkusza stylów Bootstrap w kodzie HTML, tak jak poniżej:
...
<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>
...
Ten arkusz stylów nie zawiera tylko kodu komponentu przycisku. Zawiera kod CSS wszystkich komponentów Bootstrap. Nie używasz jednak żadnych innych komponentów Bootstrap. Dlatego Twoja strona pobiera wiele kodu CSS, którego nie potrzebuje. Ten dodatkowy kod CSS jest problemem 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 zużyje jego dane mobilne.
Panel Pokrycie umożliwia nagrywanie strony i wyświetlanie raportu o łącznej liczbie używanych i nieużywanych bajtów zasobów CSS i JavaScript oraz śledzenie kodu w panelu Źródła.
Otwieranie panelu Pokrycie
- Otwórz Narzędzia deweloperskie.
- Otwórz menu poleceń.
Zacznij wpisywać
coverage, wybierz polecenie Pokaż pokrycie i następnie naciśnij Enter, aby je uruchomić. Panel Pokrycie otworzy się w Panelu bocznym.
Możesz też w prawym górnym rogu kliknąć more_vert Więcej opcji > Więcej narzędzi > Pokrycie.
Rejestrowanie pokrycia kodu
Aby zarejestrować pokrycie kodu:
Aby ustawić zakres pokrycia, na pasku działań u góry panelu Pokrycie wybierz z listy Na funkcję lub Na blok.
Aby rozpocząć nagrywanie, kliknij przycisk Przeładuj na środku panelu. Panel Pokrycie przeładuje stronę, zarejestruje kod potrzebny do jej wczytania i będzie kontynuować nagrywanie podczas interakcji ze stroną.
Aby zatrzymać rejestrowanie pokrycia kodu, na pasku działań panelu kliknij Zatrzymaj instrumentację i pokaż wyniki.
Analizowanie pokrycia kodu
Tabela w panelu Pokrycie pokazuje, które zasoby zostały przeanalizowane i ile kodu jest używane w każdym z nich.
Kliknij wiersz, aby otworzyć ten zasób w panelu Źródła i zobaczyć podział używanego i nieużywanego kodu w poszczególnych wierszach. Wszystkie nieużywane wiersze kodu są oznaczone pionowymi szarymi liniami obok kolumny z numerami wierszy po lewej stronie.
- Kolumna Adres URL zawiera adres URL analizowanego zasobu.
- Kolumna Typ informuje, czy zasób zawiera kod CSS, JavaScript czy oba te kody.
- Kolumna Łączna liczba bajtów to łączny rozmiar zasobu w bajtach.
- Kolumna Nieużywane bajty to liczba bajtów, które nie zostały użyte.
- Kolumna Wizualizacja użycia to wizualizacja kolumn Łączna liczba bajtów i Nieużywane bajty. Szara część paska to nieużywane bajty. Zielona część to używane bajty.
Aby filtrować raport według adresu URL, wpisz go w filtrze na pasku działań.
Pasek stanu u dołu panelu Pokrycie pokazuje procent używanego kodu. Pasek stanu uwzględnia filtrowanie.
Obok paska filtra możesz wybrać z listy Wszystkie lub tylko CSS albo JavaScript, aby wyświetlić je w raporcie.
Aby uwzględnić w raporcie kod rozszerzenia, włącz Skrypty treści.
Aby wyeksportować raport, kliknij Eksportuj pokrycie.