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

W Chrome 58, czyli aktualnej wersji Canary, panel Czas został przemianowany na panel Wydajność, panel Profile na panel Pamięć, a funkcja Zapis profilu procesora JavaScript w panelu Profile została przeniesiona do ukrytej lokalizacji.

Naszym 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ść oraz jak interfejs panelu Wydajność jest mapowany na stary proces, z którym jesteś zaznajomiony.

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ść 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 strona została w pełni załadowana.
    • Aby stworzyć profil bieżącej strony, kliknij Nagrywaj, wykonaj czynności, które chcesz uwzględnić w profilu, a potem kliknij Zatrzymaj.

Jak stary proces przepływu danych jest mapowany na nowy

Na zrzucie ekranu poniżej, który przedstawia widok Wykres w starym przepływie pracy, widać pozycję wykresu przeglądu wykorzystania procesora (strzałka u góry) i wykresu płomienia (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 między wykresem płomienistym w starym (po lewej) i nowym (po prawej) przepływie pracy.

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 (po lewej) i nowym (po prawej) procesie roboczym.

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 widoku drzewa w starym (po lewej) i nowym (po prawej) przepływie pracy.