Narzędzia deweloperskie w Chrome: profilowanie procesora JavaScript w Chrome 58

Kayce Basques
Kayce Basques

W Chrome 58 (obecnie w wersji Canary) panel Oś czasu zmienił nazwę na panel Wydajność, panel Profile – Pamięć, a funkcja Zarejestruj profil procesora JavaScript w panelu Profile została przeniesiona w bardziej ukrytą.

Długoterminowym celem jest usunięcie starego programu profilującego procesory JavaScript i udostępnienie wszystkim użytkownikom nowego przepływu pracy.

Z tego krótkiego przewodnika po migracji dowiesz się, jak zarejestrować profil JS w panelu Wydajność i jak interfejs panelu wydajności jest mapowany na stary przepływ pracy, który jest Ci dobrze znany.

Uzyskiwanie dostępu do starego programu profilującego procesory JavaScript

Jeśli wolisz stary przepływ pracy „Zarejestruj profil procesora JavaScript”, który był dostępny w panelu Profile, możesz nadal otworzyć w następujący sposób:

  1. Otwórz menu główne Narzędzi deweloperskich.
  2. Wybierz Więcej narzędzi > Program profilujący JavaScript. Stary program do profilowania otworzy się w nowym panelu o nazwie Profiler JavaScript.

Jak nagrać profil JS

  1. Otwórz Narzędzia deweloperskie.
  2. Kliknij kartę Skuteczność.

    Panel wydajności Chrome DevTools

    Rysunek 1. Panel Wydajność.

  3. Nagraj film na jeden z tych sposobów:

    • Aby profilować wczytanie strony, kliknij Rejestruj wczytanie strony. DevTools automatycznie rozpocznie nagrywanie, a następnie automatycznie zatrzyma po wykryciu, że strona została wczytana.
    • Aby profilować bieżącą stronę, kliknij Rejestruj, wykonaj działania, które chcesz profilować, a po zakończeniu kliknij Zatrzymaj.

Jak stary przepływ pracy jest mapowany na nowy

W widoku wykresu starego przepływu pracy na zrzucie ekranu poniżej widać pozycję wykresu z przeglądem wykorzystania procesora (strzałka u góry) i wykresu płomieniowego (strzałka na dole) w nowym przepływie pracy.

Mapowanie między wykresem płomieniowym w starym i nowym przepływie pracy.

Rysunek 2. Mapowanie wykresu płomieniowego w starym przepływie pracy (po lewej) i w nowym (po prawej).

Widok Ciężki (od dołu) jest dostępny na karcie Od dołu do góry:

Mapowanie między widokiem z dołu w starym a nowym przepływie pracy.

Rysunek 3. Mapowanie między widokiem od dołu do góry w starym przepływie pracy (po lewej) a w nowym (po prawej).

Natomiast widok Drzewo (z góry w dół) jest dostępny na karcie Drzewo wywołań:

Mapowanie między widokiem drzewa w starym a nowym przepływie pracy.

Rysunek 4. Mapowanie między widokiem drzewa w starym przepływie pracy (po lewej) a nowym (po prawej).