Panel Pokrycie w Narzędziach deweloperskich w Chrome ułatwia znajdowanie nieużywanych skryptów JavaScript Kod CSS. Usunięcie nieużywanego kodu może przyspieszyć wczytywanie strony i zaoszczędzić mobilną transmisję danych użytkowników.
Omówienie
Dostawa nieużywanego kodu JavaScript lub CSS jest częstym problemem podczas tworzenia stron internetowych. Załóżmy na przykład, że chcesz użyć komponentu przycisku wczytywania. na swojej stronie. Aby używać komponentu przycisku, musisz dodać link do Arkusz stylów Bootstrap w kodzie HTML wygląda tak:
...
<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. it zawiera kod CSS wszystkich komponentów funkcji Bootstrap. Ale nie używasz żadnych innych komponentów wczytywania. Twoja strona pobiera więc usług porównywania cen, których nie potrzebuje. Ten dodatkowy kod CSS stwarza problem w przypadku: przyczyny:
- Dodatkowy kod spowalnia wczytywanie strony. Zapoznaj się z sekcją Render-blocking CSS.
- Jeśli użytkownik otworzy stronę na urządzeniu mobilnym, dodatkowy kod zużywa mobilnej transmisji danych.
Otwórz panel Stan
- Otwórz menu poleceń.
Zacznij pisać
coverage, wybierz polecenie Pokaż zakres, a potem naciśnij Enter, aby uruchomić polecenie. Panel Stan otwiera się w: szuflada.
Rejestrowanie pokrycia kodu
Aby zarejestrować pokrycie kodu:
Aby ustawić zakres zasięgu, na pasku działań u góry panelu Pokrycie wybierz z listy Na funkcję lub Na blok.
Aby rozpocząć nagrywanie, kliknij Odśwież Rozpocznij instrumentację i załaduj ponownie stronę. Panel Stan odświeża stronę, rejestruje kod potrzebny do jej wczytania i kontynuuje nagrywanie podczas korzystania ze strony.
Aby zatrzymać rejestrowanie zasięgu kodu, kliknij stop_circle Zatrzymaj instrumentację i pokaż wyniki.
Analiza pokrycia kodu
Tabela w panelu Stan pokazuje, które zasoby zostały przeanalizowane i ile kodu jest wykorzystany w każdym z nich.
Kliknij wiersz, aby otworzyć dany zasób w panelu Źródła i zobaczyć szczegółowe informacje o używanym i nieużywanym kodzie. Nieużywane wiersze kodu są oznaczone czerwonymi liniami obok kolumny z numerami wierszy po lewej stronie.
- Kolumna URL zawiera adres URL przeanalizowanego zasobu.
- W kolumnie Typ podana jest informacja, czy zasób zawiera CSS, JavaScript oraz lub jedno i drugie.
- Kolumna Łączna liczba bajtów zawiera łączny rozmiar zasobu w bajtach.
- Kolumna Nieużywane bajty zawiera liczbę nieużywanych bajtów.
- Ostatnia kolumna bez nazwy jest wizualizacją łącznej liczby bajtów oraz Kolumny Nieużywane bajty. Czerwona sekcja paska to nieużywane bajty. szarej sekcji użyto bajtów.
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.
Z listy obok paska filtrowania wybierz Wszystkie albo tylko CSS lub JavaScript, które chcesz wyświetlić w raporcie.
Aby umieścić w raporcie kod rozszerzenia, zaznacz check_box Skrypty treści.
Aby wyeksportować raport, kliknij Pobierz Zakres eksportu.