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

Кейси Баски

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

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

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

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

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

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

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

  1. Откройте Инструменты разработчика.

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

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

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

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

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

В представлении «Диаграмма» старого рабочего процесса на снимке экрана ниже показано положение обзорной диаграммы использования ЦП (стрелка вверху) и диаграммы пламени (стрелка внизу) в новом рабочем процессе.

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

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

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

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

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

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