Chrome DevTools — профилирование процессора JavaScript в Chrome 58

Кейс Баскс
Kayce Basques
X GitHub

В Chrome 58, который в настоящее время называется Canary, панель «Временная шкала» была переименована в панель «Производительность», панель «Профили» была переименована в панель «Память», а функция «Запись профиля ЦП JavaScript» на панели «Профили» была перемещена в более скрытое место.

Долгосрочная цель — удалить старый JavaScript CPU Profiler и заставить всех работать с новым рабочим процессом.

В этом небольшом руководстве по миграции показано, как записать профиль JS на панели «Производительность» и как пользовательский интерфейс панели «Производительность» соотносится со старым рабочим процессом, к которому вы привыкли.

Доступ к старому профилировщику процессора JavaScript

Если вы предпочитаете старый рабочий процесс «Запись профиля JavaScript CPU», который раньше был доступен на панели «Профили», вы по-прежнему можете получить к нему доступ следующим образом:

  1. Откройте главное меню DevTools.
  2. Выберите Дополнительные инструменты > JavaScript Profiler . Старый профайлер открывается в новой панели под названием JavaScript Profiler .

Как записать профиль JS

  1. Откройте DevTools.

  2. Перейдите на вкладку «Производительность» .

    Панель производительности Chrome DevTools.
    Рисунок 1. Панель «Производительность».

  3. Запись осуществляется одним из следующих способов:

    • Чтобы профилировать загрузку страницы, нажмите Запись загрузки страницы . DevTools автоматически начинает запись, а затем автоматически останавливает ее, когда обнаруживает, что загрузка страницы завершена.
    • Чтобы профилировать работающую страницу, нажмите «Запись» , выполните действия, которые вы хотите профилировать, а затем нажмите «Стоп» по завершении.

Как старый рабочий процесс соотносится с новым

На снимке экрана ниже, представленном в виде диаграммы старого рабочего процесса, показано положение обзорной диаграммы использования ЦП (верхняя стрелка) и диаграммы Flame (нижняя стрелка) в новом рабочем процессе.

Сопоставление диаграмм пламени в старом и новом рабочих процессах.
Рисунок 2. Сопоставление диаграммы пламени в старом рабочем процессе (слева) и новом рабочем процессе (справа).

Вид «Тяжелый (снизу вверх)» доступен на вкладке «Снизу вверх» :

Сопоставление между видом снизу вверх в старом рабочем процессе и новым рабочим процессом.
Рисунок 3. Сопоставление между видом снизу вверх в старом рабочем процессе (слева) и новом рабочем процессе (справа).

А вид дерева (сверху вниз) доступен на вкладке «Дерево вызовов» :

Сопоставление древовидного представления в старом рабочем процессе и новом рабочем процессе.
Рисунок 4. Сопоставление между древовидным представлением в старом рабочем процессе (слева) и новом рабочем процессе (справа).

Если мы упустили какие-либо функции или у вас есть другие вопросы по этой статье, напишите @ChromeDevTools в Twitter или откройте тему на GitHub в нашем репозитории документации.