Ta strona zawiera obszerne omówienie funkcji Narzędzi deweloperskich w Chrome związanych z analizą wydajności.
W artykule Pierwsze kroki z analizowaniem wydajności środowiska wykonawczego znajdziesz samouczek dotyczący analizowania za pomocą Narzędzi deweloperskich w Chrome.
Rekordowa skuteczność
Możesz rejestrować czas działania lub ładować wydajność.
Rejestrowanie wydajności środowiska wykonawczego
Jeśli chcesz analizować wydajność strony w trakcie jej działania, rejestruj wydajność środowiska wykonawczego, np. zamiast wczytywania.
- Wejdź na stronę, którą chcesz przeanalizować.
- W Narzędziach deweloperskich kliknij kartę Skuteczność.
Kliknij Nagraj
.
Wejdź w interakcję ze stroną. Narzędzia deweloperskie rejestrują wszystkie działania na stronach, które są wynikiem interakcje.
Jeszcze raz kliknij Nagraj lub Zatrzymaj, aby zakończyć nagrywanie.
Rejestrowanie wydajności wczytywania
Rejestruj wydajność ładowania, gdy chcesz analizować wydajność strony podczas jej wczytywania, np. zamiast biegać.
- Wejdź na stronę, którą chcesz przeanalizować.
- Otwórz panel Wydajność w Narzędziach deweloperskich.
Kliknij Rozpocznij profilowanie i załaduj ponownie stronę.
Narzędzia deweloperskie najpierw przechodzą do about:blank, aby usunąć pozostałe zrzuty ekranu i ślady. Potem Narzędzia deweloperskie rejestruje dane dotyczące skuteczności podczas ponownego ładowania strony, a następnie automatycznie je zatrzymuje kilka sekund po zakończeniu wczytywania.
Narzędzia deweloperskie automatycznie powiększają fragment nagrania, w którym miała miejsce większość aktywności.
W tym przykładzie w panelu Skuteczność widać aktywność podczas wczytywania strony.
Rób zrzuty ekranu podczas nagrywania
Zaznacz pole wyboru Zrzuty ekranu, aby podczas nagrywania robić zrzut ekranu każdej klatki.
Aby dowiedzieć się, jak korzystać ze zrzutów ekranu, zapoznaj się z sekcją Wyświetlanie zrzutu ekranu.
Wymuś czyszczenie pamięci podczas nagrywania
Podczas nagrywania strony kliknij Wyczyść śmieci. mop, aby wymusić odśmiecanie pamięci.
Pokaż ustawienia nagrywania
Kliknij Ustawienia przechwytywania.
dla
udostępnić więcej ustawień związanych z rejestrowaniem nagrań z występów w Narzędziach deweloperskich.
Wyłącz próbki JavaScriptu
Domyślnie na ścieżce głównej nagrania wyświetlane są szczegółowe stosy wywołań JavaScriptu funkcji wywoływanych podczas nagrywania. Aby wyłączyć te stosy wywołań:
- Otwórz menu Ustawienia przechwytywania
. Zobacz Pokaż ustawienia nagrywania. - Zaznacz pole wyboru Wyłącz próbki JavaScript.
- Zarejestruj stronę.
Na poniższych zrzutach ekranu widać różnicę między wyłączeniem a włączeniem próbek JavaScriptu. Główna ścieżka nagrania jest znacznie krótsza, gdy wyłączone jest próbkowanie, ponieważ pomija wszystkie stosów wywołań JavaScript.
Ten przykład pokazuje nagranie z wyłączonymi przykładami JS.
Ten przykład pokazuje nagranie z włączonymi przykładami JS.
Ograniczanie działania sieci podczas nagrywania
Aby ograniczyć wykorzystanie sieci podczas nagrywania:
- Otwórz menu Ustawienia przechwytywania
. Zobacz Pokaż ustawienia nagrywania. - Ustaw Sieć na wybrany poziom ograniczania.
Ogranicz procesor podczas nagrywania
Aby ograniczyć wykorzystanie procesora podczas nagrywania:
- Otwórz menu Ustawienia przechwytywania
. Zobacz Pokaż ustawienia nagrywania. - Ustaw CPU na wybrany poziom ograniczania.
Ograniczanie zależy od możliwości komputera. Na przykład opcja Spowolnienie 2x sprawia, że procesor działa 2 razy wolniej niż zwykle. Narzędzia deweloperskie nie są w stanie w pełni symulować procesorów urządzeń mobilnych, ponieważ architektura urządzeń mobilnych bardzo się różni komputerach stacjonarnych i laptopach.
Włącz statystyki selektora arkusza CSS
Aby wyświetlić statystyki selektorów reguł CSS podczas długotrwałych zdarzeń Ponownie oblicz styl:
- Otwórz menu Ustawienia przechwytywania
. Zobacz Pokaż ustawienia nagrywania. - Zaznacz pole wyboru Włącz statystyki selektora arkusza CSS.
Więcej informacji znajdziesz w artykule o analizowaniu skuteczności selektora CSS podczas ponownego obliczania stylu.
Włącz zaawansowaną instrumentację renderowania
Aby wyświetlić szczegółową instrumentację renderowania:
- Otwórz menu Ustawienia przechwytywania . Zobacz Pokaż ustawienia nagrywania.
- Zaznacz pole wyboru Włącz zaawansowaną instrumentację renderowania.
Aby dowiedzieć się, jak korzystać z informacji o wyrenderowaniu, zapoznaj się z sekcjami Wyświetlanie warstw i Wyświetlanie wyrenderowania program profilujący.
Emuluj równoczesność sprzętu
Aby przetestować wydajność aplikacji z różną liczbą rdzeni procesora, możesz skonfigurować wartość raportowaną przez właściwość navigator.hardwareConcurrency. Niektóre aplikacje używają tej właściwości do sterowania stopniem równoległości działania, na przykład do kontrolowania rozmiaru puli pthread Emscripten.
Aby emulować równoczesność sprzętu:
- Otwórz menu Ustawienia przechwytywania
. Zobacz Pokaż ustawienia nagrywania. - Zaznacz Równoczesność sprzętu i ustaw liczbę rdzeni w polu do wprowadzania danych.
Obok karty Wydajność w Narzędziach deweloperskich wyświetla się ikona ostrzeżenia 
, która przypomina, że emulacja równoczesności sprzętu jest włączona.
Aby przywrócić domyślną wartość (10), kliknij przycisk Przywróć 
.
Zapisywanie nagrania
Aby zapisać nagranie, kliknij prawym przyciskiem myszy i wybierz Zapisz profil.
Wczytaj nagranie
Aby wczytać nagranie, kliknij prawym przyciskiem myszy i wybierz Load Profile (Wczytaj profil).
Wyczyść poprzednie nagranie
Po utworzeniu nagrania kliknij Wyczyść nagranie.
, aby usunąć nagranie z panelu Skuteczność.
Analizowanie nagrania z występu
Po zarejestrowaniu wydajności środowiska wykonawczego lub zarejestrowaniu wydajności wczytywania dane Wydajność który zawiera wiele danych do analizowania skuteczności zdarzenia.
Poruszanie się po nagraniu
Aby dokładnie przyjrzeć się nagraniu, możesz wybrać fragment nagrania, przewinąć długi wykres płomieniowy, powiększyć lub pomniejszyć widok, a także przechodzić między poziomami powiększenia, używając menu nawigacyjnego.
Wybierz fragment nagrania
Pod paskiem działań w panelu Wydajność u góry nagrania zobaczysz sekcję Oś czasu – omówienie z wykresami CPU i NET.
Aby zaznaczyć fragment nagrania, kliknij i przytrzymaj, a następnie przeciągnij w lewo lub w prawo przez sekcję Przegląd osi czasu.
Aby zaznaczyć fragment za pomocą klawiatury:
- Zaznacz ścieżkę Główna lub jednego z jej sąsiadów.
- Do powiększania, przesuwania w lewo, pomniejszania i przesuwania w prawo służą klawisze W, A, S i D.
Aby zaznaczyć fragment za pomocą trackpada:
- Najedź kursorem na sekcję Przegląd osi czasu lub dowolną ścieżkę (Główna i jej sąsiad).
- Przesuń 2 palcami w górę, aby pomniejszyć widok, w lewo, aby przesunąć w lewo, w dół, aby powiększyć. przesuń w prawo, aby przejść w prawo.
Twórz menu nawigacyjne i przełączaj się między poziomami powiększenia
Przegląd osi czasu umożliwia tworzenie kolejno wielu zagnieżdżonych menu nawigacyjnego, zwiększanie poziomu powiększenia, a potem przechodzenie na wybrany poziom.
Aby utworzyć menu nawigacyjne i z niego korzystać:
- Na stronie Przegląd osi czasu wybierz fragment nagrania.
- Najedź kursorem na wybraną pozycję i kliknij przycisk zoom_in N ms. Wybór będzie się rozwijał, aby wypełnić Przegląd osi czasu. Łańcuch menu nawigacyjnego zaczyna się tworzyć u góry Przeglądu osi czasu.
- Powtórz 2 poprzednie kroki, aby utworzyć kolejne zagnieżdżone menu nawigacyjne. Możesz nadal zagnieżdżać menu nawigacyjne, jeśli zakres wyboru jest większy niż 5 milisekund.
- Aby przejść do wybranego poziomu powiększenia, kliknij odpowiednie menu nawigacyjne w łańcuchu u góry Przeglądu osi czasu.
Przewijanie długiego wykresu płomieniowego
Aby przewinąć długi wykres płomienny na ścieżce głównej lub sąsiednich, kliknij i przytrzymaj, a następnie przeciągnij w dowolnym kierunku, aż zobaczysz to, czego szukasz.
Aktywności związane z wyszukiwaniem
Aby otworzyć pole wyszukiwania u dołu panelu Skuteczność, naciśnij:
- macOS: Command+F
- Windows, Linux: Control+F
Ten przykład pokazuje wyrażenie regularne w polu wyszukiwania u dołu, które znajduje dowolną aktywność rozpoczynającą się od E.
Aby przeglądać aktywności pasujące do zapytania:
- Kliknij przycisk expand_less Wstecz lub expand_less Dalej.
- Naciśnij Shift + Enter, aby wybrać poprzedni element, lub Enter, aby wybrać następną.
W panelu Skuteczność nad aktywnością wybraną w polu wyszukiwania wyświetla się etykietka.
Aby zmienić ustawienia zapytania:
- Kliknij match_case Dopasuj wielkość liter, aby uwzględnić w zapytaniu wielkość liter.
- Kliknij regular_expression Wyrażenie regularne, aby w zapytaniu użyć wyrażenia regularnego.
Aby ukryć pole wyszukiwania, kliknij Anuluj.
Zmienianie kolejności utworów i ukrywanie ich
Aby oczyścić dane ze zrzutu wydajności, możesz zmienić kolejność ścieżek i ukryć nieistotne ścieżki w trybie konfiguracji śledzenia.
Aby przenieść lub ukryć ścieżki:
- Aby włączyć tryb konfiguracji, kliknij prawym przyciskiem myszy nazwę ścieżki i wybierz Skonfiguruj ścieżki.
- Kliknij arrow_upward w górę lub arrow_downward w dół, aby przenieść utwór w górę lub w dół. Kliknij visibility_off, aby ją ukryć.
- Gdy skończysz, u dołu kliknij Zakończ konfigurowanie ścieżek, aby wyjść z trybu konfiguracji.
Obejrzyj film, by zobaczyć, jak działa ten proces.
Panel Skuteczność zapisuje konfigurację ścieżki na potrzeby nowych logów czasu, ale nie w kolejnych sesjach Narzędzi deweloperskich.
Wyświetl aktywność w wątku głównym
Ścieżka Główny umożliwia wyświetlenie aktywności, która miała miejsce w głównym wątku strony.
Kliknij zdarzenie, aby wyświetlić więcej informacji na jego temat na karcie Podsumowanie. W panelu Skuteczność zaznaczone zdarzenie jest zaznaczone na niebiesko.
Ten przykład pokazuje więcej informacji o zdarzeniu wywołania funkcji get na karcie Podsumowanie.
Odczytaj wykres płomieniowy
Panel Skuteczność pokazuje aktywność głównego wątku na wykresie płomieniowym. Oś X przedstawia nagranie w czasie. Oś Y reprezentuje stos wywołań. Zdarzenia u góry odpowiadają za zdarzenia poniżej.
Ten przykład pokazuje wykres płomieni na ścieżce Main. Zdarzenie click spowodowało anonimowe wywołanie funkcji. Ta funkcja z kolei nosi nazwę onEndpointClick_ o nazwie handleClick_ i tak dalej.
W panelu Skuteczność skrypty są przypisywane losowymi kolorami, aby rozbić wykres płomieniowy i uczynić go bardziej czytelnym. W poprzednim przykładzie wywołania funkcji z jednego skryptu mają kolor jasnoniebieski. Połączenia nawiązane przez inny skrypt mają kolor jasnoróżowy. Ciemniejszy żółty – działanie skryptu, a fioletowy – aktywność związaną z renderowaniem. Te ciemniejsze, żółte i fioletowe zdarzenia są spójne we wszystkich nagraniach.
Długie zadania są również wyróżnione czerwonym trójkątem, a część powyżej 50 milisekund jest w kolorze czerwonym:
W tym przykładzie czas trwania zadania przekroczył 400 milisekund, więc część reprezentująca ostatnie 350 milisekund jest zacieniona na czerwono, a początkowe 50 milisekund – nie.
Dodatkowo ścieżka Główna zawiera informacje o profilach procesora uruchomionych i zatrzymywanych przez funkcje konsoli profile() i profileEnd().
Aby ukryć szczegółowy wykres płomieniowy wywołań JavaScript, zapoznaj się z sekcją Wyłączanie przykładów JavaScriptu. Gdy przykłady JS są wyłączone, widoczne są tylko zdarzenia ogólne, takie jak Event (click) i Function Call.
Śledzenie inicjatorów zdarzeń
Ścieżka Główna może zawierać strzałki łączące poniższe inicjatory i wywołane przez nie zdarzenia:
- Unieważnienie stylu lub układu -> Przelicz ponownie style lub Układ
- Poproś o ramkę animacji -> Uruchomiono ramkę animacji
- Prośba o bezczynne wywołanie zwrotne -> Uruchom nieaktywne wywołanie zwrotne
- Zainstaluj licznik czasu -> Minutnik został uruchomiony
- Utwórz WebSocket -> Wyślij... i Odbierz uzgadnianie połączenia WebSocket lub Zniszcz WebSocket
Aby zobaczyć strzałki, znajdź na wykresie płomieniowym inicjator lub zdarzenie, które wywołało.
Gdy wybierzesz tę opcję, na karcie Podsumowanie będą widoczne linki Inicjator dla dotyczące inicjatorów i Zainicjowane przez dla wywołanych zdarzeń. Klikaj je, aby przechodzić między odpowiednimi wydarzeniami.
Ukryj funkcje i ich elementy podrzędne na wykresie płomieniowym
Aby uporządkować wykres płomieniowy w wątku głównym, możesz ukryć wybrane funkcje lub ich elementy podrzędne:
Na ścieżce Głównej kliknij funkcję prawym przyciskiem myszy i wybierz jedną z tych opcji lub naciśnij odpowiedni skrót:
- Ukryj funkcję (
H) - Ukryj podrzędne (
C) - Ukryj powtarzające się elementy podrzędne (
R) - Zresetuj elementy podrzędne (
U) - Zresetuj ślad (
T) - Dodaj skrypt do listy ignorowanych (
I)
Obok nazwy funkcji z ukrytymi elementami podrzędnymi pojawi się przycisk menu arrow_drop_down.
- Ukryj funkcję (
Aby zobaczyć liczbę ukrytych elementów podrzędnych, najedź kursorem na przycisk arrow_drop_down
Aby zresetować funkcję z ukrytymi elementami podrzędnymi lub całym wykresem płomieniowym, wybierz funkcję i naciśnij
Ulub kliknij dowolną funkcję prawym przyciskiem myszy i wybierz Resetuj ślad.
Ignoruj skrypty na wykresie płomieniowym
Aby dodać skrypt do listy ignorowanych, kliknij go prawym przyciskiem myszy i wybierz Dodaj skrypt do listy ignorowanych.
Wykres zwija ignorowane skrypty, oznacza je jako Na liście ignorowanych i dodaje je do reguł niestandardowego wykluczania w ustawieniach Ustawienia > Ignoruj listę. Ignorowane skrypty są zapisywane, dopóki nie usuniesz ich ze śledzenia lub z niestandardowych reguł wykluczania.
Wyświetlanie aktywności w tabeli
Po zarejestrowaniu strony nie musisz już analizować aktywności wyłącznie na ścieżce głównej. W Narzędziach deweloperskich dostępne są też 3 widoki tabelaryczne do analizy aktywności. Każdy widok zapewnia inny spojrzenie na te działania:
- Jeśli chcesz wyświetlić działania główne, które powodują najwięcej pracy, użyj drzewa wywołań. .
- Aby wyświetlić aktywności, podczas których bezpośrednio poświęcono najwięcej czasu, użyj Karta Od dołu.
- Jeśli chcesz wyświetlić aktywności w kolejności, w jakiej miały miejsce podczas nagrywania, użyj opcji kartę Dziennik zdarzeń.
Aby pomóc Ci szybciej znaleźć to, czego szukasz, wszystkie trzy karty mają obok paska Filtr przyciski zaawansowanego filtrowania:
- match_case Uwzględniaj wielkość liter.
- regular_expression Wyrażenie regularne.
- match_word Dopasowanie do całego słowa.
Każdy widok tabelaryczny w panelu Skuteczność zawiera linki do działań takich jak wywołania funkcji. Aby ułatwić Ci debugowanie, Narzędzia deweloperskie znajdują w plikach źródłowych odpowiednie deklaracje funkcji. Poza tym, jeśli dostępne i włączone są odpowiednie mapy źródłowe, Narzędzia deweloperskie automatycznie znajdują oryginalne pliki.
Kliknij link, aby otworzyć plik źródłowy w panelu Źródła.
Działania na poziomie głównym
Oto wyjaśnienie koncepcji aktywności głównej omówionej na karcie Drzewo wywołań: Karta Od dołu i Dziennik zdarzeń.
Działania główne to te, które powodują wykonywanie określonych zadań przez przeglądarkę. Na przykład:
przeglądarki uruchamia działanie Event jako działanie główne. To polecenie Event może spowodować moduł obsługi
do wykonania.
Na wykresie płomieniowym głównej ścieżki aktywności główne znajdują się na jej górze. W trakcie rozmowy Na kartach Drzewo i Dziennik zdarzeń działania na poziomie głównym należą do elementów najwyższego poziomu.
Przykładowe działania roota znajdziesz na karcie Drzewo wywołań.
Karta Drzewo połączeń
Na karcie Drzewo wywołań możesz sprawdzić, które działania główne powodują najwięcej pracy.
Karta Drzewo wywołań przedstawia tylko działania w wybranej części nagrania. Zobacz Wybierz fragment nagrania, aby dowiedzieć się, jak wybrać jego fragmenty.
W tym przykładzie najwyższy poziom elementów w kolumnie Aktywność, np. Event, Paint i
Composite Layers to działania główne. Zagnieżdżenie reprezentuje stos wywołań. W
w tym przykładzie reguła Event spowodowała zdarzenie Function Call, które spowodowało button.addEventListener, które spowodowało b,
i tak dalej.
Czas własny oznacza czas poświęcony bezpośrednio tej aktywności. Łączny czas przedstawia: czas spędzony w tej aktywności lub jej dzieciach.
Kliknij Samodzielny czas, Łączny czas lub Aktywność, aby posortować tabelę według tej kolumny.
Użyj pola Filtr, aby przefiltrować zdarzenia według nazwy aktywności.
Domyślnie opcja menu Grupowanie jest ustawiona na Bez grupowania. Użyj menu Grupowanie, aby posortować na podstawie różnych kryteriów.
Kliknij Pokaż najcięższy stos.
aby wyświetlić kolejną tabelę po prawej stronie tabeli Aktywność. Kliknij aktywność, aby wypełnić
Tabela Najcięższy stos. Tabela Najcięższy stos pokazuje, które elementy podrzędne wybranych
wykonanie działania trwało najdłużej.
Karta Od dołu
Na karcie Od dołu do góry możesz sprawdzić, które działania bezpośrednio zajmowały najwięcej czasu.
Karta Od dołu do góry pokazuje tylko aktywności w wybranej części nagrania. Zobacz Wybierz fragment nagrania, aby dowiedzieć się, jak wybrać jego fragmenty.
Na głównym wykresie płomieniowym w tym przykładzie widać, że prawie wszystkie
czas poświęcony na wykonywanie 3 wywołań wait(). W związku z tym największą aktywność w
Karta od dołu znajduje się wait. Na wykresie płomieniowym żółty poniżej
połączeń z numerem wait to w rzeczywistości tysiące połączeń z numerem Minor GC. W związku z tym widać, że
kartę Od dołu, kolejna najdroższa aktywność to Minor GC.
Kolumna Czas własny przedstawia łączny czas spędzony bezpośrednio w tej aktywności we wszystkich jego wystąpień.
Kolumna Łączny czas przedstawia łączny czas spędzony w tej aktywności lub w jej aktywności podrzędnej.
Karta Dziennik zdarzeń
Na karcie Dziennik zdarzeń możesz wyświetlać działania w kolejności, w jakiej miały miejsce w okresie nagrywanie.
Na karcie Dziennik zdarzeń są wyświetlane tylko czynności wykonywane w wybranej części nagrania. Zobacz Wybierz fragment nagrania, aby dowiedzieć się, jak wybrać jego fragmenty.
Kolumna Czas rozpoczęcia wskazuje punkt, w którym rozpoczęło się działanie (względem początku)
nagrania. Czas rozpoczęcia trybu 1573.0 ms w przypadku wybranego elementu w tym przykładzie
co oznacza, że aktywność rozpoczęła się 1573 ms po rozpoczęciu nagrywania.
Kolumna Czas własny pokazuje czas spędzony bezpośrednio w danej aktywności.
Kolumny Łączny czas podają czas spędzony bezpośrednio na tej aktywności lub w dowolnym dzieci.
Kliknij Czas rozpoczęcia, Czas własny lub Łączny czas, aby posortować tabelę według tej kolumny.
Za pomocą pola Filtruj możesz filtrować aktywności według nazwy.
Użyj menu Czas trwania, aby odfiltrować działania, które trwały krócej niż 1 lub 15 ms. Domyślnie w menu Czas trwania wybrane jest ustawienie Wszystko, co oznacza, że widoczne są wszystkie aktywności.
Wyłącz pola wyboru Ładowanie, Skrypty, Renderowanie lub Obraz, aby odfiltrować wszystkie aktywności z tych kategorii.
Wyświetl terminy
Na ścieżce Czasy możesz zobaczyć ważne znaczniki, takie jak:
- Pierwsze wyrenderowanie
- Pierwsze wyrenderowanie treści (FCP)
- Największe wyrenderowanie treści (LCP)
- Zdarzenie DOMContentLoaded (DCL)
- Zdarzenie Onload (L)
- Twoje niestandardowe połączenia
performance.mark(). Pojedynczy znak z etykietką wyświetlany poniżej o czasie trwania 813, 44 ms jest oznaczony etykietą Rozpoczynanie uruchamiania JavaScriptu. - Twoje niestandardowe połączenia
performance.measure(). Poniżej znajduje się żółty zakres o nazwie Powolna interakcja.
Wybierz znacznik, aby wyświetlić więcej informacji na karcie Podsumowanie, w tym sygnaturę czasową, łączny czas, czas własny i obiekt detail.
Wyświetl interakcje
Możesz przeglądać interakcje użytkowników na ścieżce Interakcje, aby wykrywać potencjalne problemy z responsywnością.
Aby wyświetlić interakcje:
- Otwórz Narzędzia deweloperskie na przykład na tej stronie demonstracyjnej.
- Otwórz panel Skuteczność i rozpocznij nagrywanie.
- Kliknij element (kawa) i zatrzymaj nagrywanie.
- Znajdź ścieżkę Interakcje na osi czasu.
W tym przykładzie ścieżka Interakcje pokazuje interakcję wskaźnika. Interakcje mają wąsy, które wskazują opóźnienia danych wejściowych i prezentacji w granicach czasu przetwarzania. Najedź kursorem na interakcję, aby zobaczyć etykietkę z opóźnieniem danych wejściowych, czasem przetwarzania i opóźnieniem prezentacji.
Ścieżka Interakcje wyświetla też na karcie Podsumowanie oraz w etykietce po najechaniu kursorem ostrzeżenie Interakcja z następnym wyrenderowaniem (INP) w przypadku interakcji dłuższych niż 200 milisekund:
Ścieżka Interakcje wskazuje interakcje trwające ponad 200 milisekund z czerwonym trójkątem w prawym górnym rogu.
Wyświetl aktywność GPU
Możesz wyświetlić aktywność GPU w sekcji GPU.
Wyświetl aktywność rastrową
Aktywność rastrów możesz wyświetlać w sekcji Pula wątków.
Analizowanie klatek na sekundę (FPS)
Narzędzia deweloperskie zapewniają wiele sposobów analizowania klatek na sekundę:
- W sekcji Klatki możesz sprawdzić, jak długo trwała określona klatka.
- Licznik klatek na sekundę pozwala oszacować w czasie rzeczywistym liczbę klatek na sekundę podczas wyświetlania strony. Patrz sekcja Wyświetlanie klatek na sekundę. w czasie rzeczywistym za pomocą miernika FPS.
Sekcja Ramki
W sekcji Klatki możesz sprawdzić, ile dokładnie trwało wyświetlenie danej klatki.
Najedź kursorem na ramkę, aby wyświetlić etykietkę z dodatkowymi informacjami na jej temat.
W tym przykładzie po najechaniu kursorem na ramkę wyświetla się etykietka.
W sekcji Klatki mogą być widoczne cztery typy klatek:
- Nieaktywne ramki (biała). Bez zmian.
- Ramka (zielona). Wyrenderowano zgodnie z oczekiwaniami i na czas.
- Częściowo przedstawiona ramka (żółta z rozproszonymi szerokimi kreskami). Przeglądarka Chrome starała się wyrenderować co najmniej kilka aktualizacji wizualnych na czas. Dotyczy to na przykład sytuacji, w których zadanie głównego wątku procesu renderowania (animacja kanwy) jest opóźnione, ale wątek kompozytora (przewijanie) jest w czasie.
- Upuszczona ramka (czerwona z gęstymi liniami ciągłymi). Chrome nie może wyrenderować ramki w rozsądnym czasie.
Ten przykład pokazuje etykietkę, gdy najedziesz kursorem na częściowo wyświetlaną ramkę.
Kliknij ramkę, aby na karcie Podsumowanie wyświetlić jeszcze więcej informacji na jej temat. DevTools obrysuje wybraną ramkę na niebiesko.
Wyświetl żądania sieciowe
Rozwiń sekcję Sieć, aby wyświetlić kaskadę żądań sieciowych, które wystąpiły podczas rejestrowania wydajności.
Obok nazwy ścieżki Sieć znajduje się legenda z oznaczonymi kolorami typów żądań.
Żądania blokowania renderowania są oznaczone czerwonym trójkątem w prawym górnym rogu.
Najedź kursorem na prośbę, aby wyświetlić etykietkę z tymi informacjami:
- Adres URL żądania i łączny czas jego wykonania.
- Priorytet lub zmiana priorytetu, na przykład
Medium -> High. - Określa, czy żądanie ma wartość
Render blocking. - Zestawienie czasów żądań, opisane później.
Gdy klikniesz żądanie, ścieżka Sieć wyświetli strzałkę od inicjatora do żądania.
Dodatkowo w panelu Skuteczność wyświetla się karta Podsumowanie z dodatkowymi informacjami o żądaniu, w tym m.in. polami Początkowy priorytet i (ostatecznie) Priorytet. Jeśli ich wartości są różne, priorytet pobierania żądania zmienił się podczas nagrywania. Więcej informacji znajdziesz w artykule o optymalizowaniu wczytywania zasobów przy użyciu interfejsu Fetch Priority API.
Karta Podsumowanie również zawiera zestawienie czasów żądania.
Żądanie dotyczące www.google.com jest reprezentowane przez linię po lewej stronie (|–), pasek w środku z ciemną i jasną częścią oraz linię po prawej stronie (–|).
Inne zestawienie czasowe znajdziesz na karcie Sieć. Kliknij prawym przyciskiem myszy żądanie na ścieżce sieci lub jego adres URL na karcie Podsumowanie, a potem kliknij Pokaż w panelu Sieć. W Narzędziach deweloperskich przejdziesz do panelu Sieć i wybierzesz odpowiednie żądanie. Otwórz kartę Czas.
Oto jak te 2 zestawienia są ze sobą powiązane:
- Lewa linia (
|–) zawiera wszystkie dane z grupy zdarzeńConnection startwłącznie. Innymi słowy, jest to wszystko przedRequest Sent. - Jasna część paska to
Request sentiWaiting for server response. - Ciemna część paska to
Content download. - Wiersz po prawej stronie (
–|) to czas oczekiwania na wątek główny. Sieć > Nie widać tego na karcie Czas.
Wyświetl wskaźniki dotyczące pamięci
Zaznacz pole wyboru Pamięć, aby wyświetlić wskaźniki dotyczące pamięci z ostatniego nagrania.
Nad kartą Podsumowanie w Narzędziach deweloperskich wyświetli się nowy wykres Pamięć. Poniżej znajdziesz nowy wykres. wykres NET o nazwie HEAP. Wykres HEAP zawiera te same informacje co wykres JS Linia sterty na wykresie Pamięć.
Ten przykład pokazuje dane dotyczące pamięci nad kartą Podsumowanie.
Kolorowe linie na wykresie odpowiadają kolorowym polu wyboru nad wykresem. Wyłącz pole wyboru, aby: ukryć tę kategorię na wykresie.
Wykres pokazuje tylko wybrany region nagrania. We wcześniejszym przykładzie wykres Pamięć pokazuje wykorzystanie pamięci tylko na początku nagrywania do około 1000 ms.
Wyświetlanie czasu trwania fragmentu nagrania
Analizując sekcję taką jak Sieć czy Główna, czasami potrzebujesz dokładniejszego oszacowania jak długo trwało określone zdarzenia. Przytrzymaj Shift, kliknij i przytrzymaj, a następnie przeciągnij w lewo lub w prawo, aby zaznaczyć fragment nagrania. U dołu zaznaczenia w Narzędziach deweloperskich zobaczysz, ile czasu zajęło Ci dany fragment.
W tym przykładzie sygnatura czasowa 488.53ms na dole wybranej części wskazuje, jak długo
jaka była jego część.
Wyświetl zrzut ekranu
Aby dowiedzieć się, jak włączyć zrzuty ekranu, zobacz Robienie zrzutów ekranu podczas nagrywania.
Najedź kursorem na Przegląd osi czasu, aby zobaczyć zrzut ekranu przedstawiający stronę w danym momencie nagrywanie. Przegląd osi czasu to sekcja zawierająca wykresy CPU, FPS i NET.
Zrzuty ekranu możesz też wyświetlać, klikając ramkę w sekcji Klatki. Narzędzia deweloperskie wyświetlają mały zrzut ekranu na karcie Podsumowanie.
Ten przykład przedstawia zrzut ekranu ramki 195.5ms na karcie Podsumowanie po kliknięciu jej w sekcji Ramki.
Kliknij miniaturę na karcie Podsumowanie, aby powiększyć zrzut ekranu.
Ten przykład to powiększony zrzut ekranu po kliknięciu jego miniatury na karcie Podsumowanie.
Wyświetlanie informacji o warstwach
Aby wyświetlić zaawansowane informacje o warstwie na temat ramki:
- Włącz zaawansowaną instrumentację renderowania.
- Wybierz klatkę w sekcji Klatki. Informacje o swoich warstwach w Narzędziach deweloperskich nową kartę Warstwy obok karty Dziennik zdarzeń.
Najedź kursorem na warstwę, aby wyróżnić ją na diagramie.
W tym przykładzie po najechaniu na nią kursorem jest podświetlona warstwa #39.
Aby przenieść diagram:
- Kliknij Tryb przesuwania
.
aby przesuwać się wzdłuż osi X i Y. - Kliknij Tryb obrotu.
, aby obrócić
wzdłuż osi Z. - Kliknij Zresetuj przekształcenie
.
aby zresetować diagram do jego pierwotnej pozycji.
Zobacz, jak działa analiza warstw:
Wyświetl program profilujący renderowanie
Aby wyświetlić zaawansowane informacje o zdarzeniu renderowania:
- Włącz zaawansowaną instrumentację renderowania.
- Wybierz zdarzenie Paint na ścieżce Main.
Analizowanie wydajności renderowania na karcie Renderowanie
Funkcje dostępne na karcie Renderowanie ułatwiają wizualizację wydajności renderowania strony.
Sprawdzaj liczbę klatek na sekundę w czasie rzeczywistym dzięki miernikowi klatek na sekundę
Statystyki renderowania klatek to nakładka widoczna w prawym górnym rogu widocznego obszaru. W czasie rzeczywistym podaje szacunkową liczbę klatek na sekundę podczas działania strony.
Zobacz Statystyki renderowania klatek.
Obserwuj wydarzenia malowania w czasie rzeczywistym dzięki migoczeniu farby
Użyj Migania farby, by na bieżąco widzieć wszystkie zdarzenia renderowania na stronie.
Patrz Miganie farby.
Wyświetlanie nakładki warstw z obramowaniem warstw
Użyj opcji Obramowanie warstw, aby wyświetlić nakładkę z obramowaniem warstw i kafelkami u góry strony.
Patrz Obramowanie warstw.
Znajduj problemy z wydajnością przewijania w czasie rzeczywistym
Zapoznaj się z sekcją Problemy z wydajnością przewijania, aby wykrywać elementy strony z detektorami zdarzeń powiązanymi z przewijaniem, które mogą negatywnie wpływać na wydajność strony. W Narzędziach deweloperskich znajdziesz potencjalnie problematycznych elementów w kolorze morskim.