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

Kayce Basques

W Chrome 58, która obecnie nazywa się Canary, nazwa panelu Oś czasu została zmieniona na panel Wydajność, nazwa panelu Profile zmieniła się na panel Pamięć, a funkcja Rejestruj profil procesora JavaScriptu, która znajduje się w panelu Profile, została przeniesiona do bardziej ukrytego miejsca.

Długoterminowym celem jest usunięcie starego programu profilującego procesory JavaScript i umożliwienie wszystkim pracy z nowym przepływem pracy.

Z tego krótkiego przewodnika po migracji dowiesz się, jak zarejestrować profil JS w panelu Wydajność i jak interfejs panelu Wydajność jest mapowany na poprzedni przepływ pracy.

Uzyskiwanie dostępu do starego narzędzia do profilowania procesora JavaScript

Jeśli wolisz stary przepływ pracy „Rejestruj profil procesora JavaScript”, który wcześniej był dostępny w panelu Profile, możesz uzyskać do niego dostęp w ten sposób:

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

Jak nagrać profil JS

  1. Otwórz Narzędzia deweloperskie.

  2. Kliknij kartę Skuteczność.

    Panel wydajności Narzędzi deweloperskich w Chrome.
    Rysunek 1 Panel Skuteczność.

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

    • Aby profilować wczytanie strony, kliknij Zarejestruj wczytanie strony. Narzędzia deweloperskie automatycznie rozpoczynają nagrywanie i zatrzymują się, gdy tylko wykryje, że strona się wczytuje.
    • Aby profilować biegną stronę, kliknij Rejestruj, wykonaj odpowiednie działania, a po zakończeniu kliknij Zatrzymaj.

Jak stary przepływ pracy przekłada się na nowy

Zrzut ekranu poniżej w widoku wykresustarego przepływu pracy przedstawia położenie wykresu przeglądu wykorzystania procesora (górna strzałka) i wykresu płomieniowego (strzałka u dołu) w nowym przepływie pracy.

Mapowanie między wykresem płomieniowym w starym a nowym przepływie pracy.
Rysunek 2. Mapowanie między wykresem płomieniowym w starym przepływie pracy (po lewej) a nowym przepływie pracy (po prawej).

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

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

Na karcie Drzewo wywołań dostępny jest natomiast widok Drzewo (od góry w dół):

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) i nowym przepływie pracy (po prawej).

Użyj polecenia @ChromeDevTools na Twitterze lub otwórz zgłoszenie problemu na GitHubie w naszym repozytorium Dokumentów, jeśli ominęliśmy jakieś funkcje lub jeśli masz inne pytania dotyczące tego artykułu.