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

Kayce Basques

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

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

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

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

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

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

Предупреждение. Долгосрочная цель — перевести всех на новый рабочий процесс. Этот рабочий процесс может быть удален в будущих версиях DevTools.

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

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

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

   

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

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

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

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

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

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

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

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

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

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

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