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

Kayce Basques
Kayce Basques
X GitHub

W Chrome 58, który jest obecnie dostępny w wersji Canary, panel Czas został przemianowany na panel Wydajność, panel Profile na panel Pamięć, a funkcja Zapisywanie profilu procesora JavaScript w panelu Profile została przeniesiona do ukrytej lokalizacji.

Długofalowym celem jest usunięcie starego profilu procesora JavaScript i zachęcenie wszystkich do korzystania z nowego procesu.

Ten krótki przewodnik po migracji zawiera informacje o tym, jak zapisać profil JS w panelu wydajności oraz jak interfejs panelu wydajności odzwierciedla stary proces, do którego jesteś przyzwyczajony.

Dostęp do starego narzędzia do profilowania procesora JavaScript

Jeśli wolisz stary przepływ pracy „Rejestrowanie profilu procesora JavaScript”, który był dostępny w panelu Profile, możesz nadal z niego korzystać w ten sposób:

  1. Otwórz menu główne w Narzędziach deweloperskich.
  2. Kliknij Więcej narzędzi > Program profilujący JavaScript. Stary profilator otworzy się w nowym panelu Profilator JavaScriptu.

Jak nagrywać profil JS

  1. Otwórz Narzędzia deweloperskie.

  2. Kliknij kartę Skuteczność.

    Panel wydajności w Narzędziach deweloperskich w Chrome.
    Rysunek 1. Panel Wydajność.

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

    • Aby stworzyć profil ładowania strony, kliknij Rejestruj wczytywanie strony. Narzędzia deweloperskie automatycznie rozpoczną nagrywanie, a potem automatycznie je zakończą, gdy wykryją, że strona została w pełni załadowana.
    • Aby przeprowadzić profilowanie strony, kliknij Nagrywaj, wykonaj czynności, które chcesz profilować, a gdy skończysz, kliknij Zatrzymaj.

Jak stary proces przepływu danych jest mapowany na nowy

Na poniższym zrzucie ekranu z widoku Wykres starego przepływu pracy widać położenie wykresu przeglądu wykorzystania procesora (strzałka u góry) i wykresu słupkowego (strzałka u dołu) w nowym przepływie pracy.

Mapowanie między diagramem płomienistym w starym i nowym przepływie pracy
Rysunek 2. Mapowanie wykresu płomieni w starym (po lewej) i nowym (po prawej) procesie

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

Mapowanie widoku od dołu w starym i nowym przepływie pracy
Rysunek 3. Mapowanie widoku od dołu w starym procesie (po lewej) i nowym procesie (po prawej).

Widok Drzewo (od góry do dołu) jest dostępny na karcie Drzewo połączeń:

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

Jeśli pominęliśmy jakąś funkcję lub masz inne pytania dotyczące tego artykułu, wyślij ping do @ChromeDevTools na Twitterze lub otwórz zgłoszenie na GitHubie w naszym repozytorium dokumentów.