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

Kayce Basques

Twitter GitHub Usterka

W Chrome 58 (obecnie w wersji Canary) panel Oś czasu zmienił nazwę na panel Wydajność, panel Profile nosi nazwę Memory, 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.

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 Program profilujący JavaScript.

Ostrzeżenie: celem długoterminowym jest przeniesienie wszystkich użytkowników do nowego przepływu pracy. Ten przepływ pracy może zostać usunięty w przyszłych wersjach Narzędzi deweloperskich.

Jak nagrać profil JS

1. Otwórz Narzędzia deweloperskie.

2. Kliknij kartę Skuteczność.

   

   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ę wykresów z omówieniem wykorzystania procesora (strzałka u góry) i wykresu płomieniowego (strzałka na dole) w nowym przepływie pracy.

Rysunek 2. Mapowanie między wykresem płomieniowym 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:

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

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

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

Wyślij polecenie @ChromeDevTools na Twitterze lub otwórz zgłoszenie dotyczące problemu na GitHubie w naszym repozytorium dokumentów, jeśli pominęliśmy jakieś funkcje lub jeśli masz inne pytania dotyczące tego artykułu.