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

Kayce Basques

W Chrome 58, który jest obecnie dostępny w wersji Canary, panel Czas został przemianowany na Panel wydajności, a panel Profile na Panel pamięci, 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 jest mapowany na stary proces, z którym się przyzwyczailiśmy.

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 Narzędzi 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 Nagrywaj wczytywanie strony. Narzędzia deweloperskie automatycznie rozpoczną nagrywanie, a potem automatycznie je zakończą, gdy wykryją, że wczytywanie strony zostało zakończone.
    • Aby przeprowadzić profilowanie strony, kliknij Nagrywaj, wykonaj czynności, które chcesz przeanalizować, 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łomienistego 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 między widokiem 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 jakieś funkcje 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.