В Chrome 58, который в настоящее время является Canary, панель «Таймлайн» была переименована в панель «Производительность», панель «Профили» переименована в панель «Память», а функция «Запись профиля процессора JavaScript» на панели «Профили» была перемещена в более скрытое место. .
Долгосрочная цель — удалить старый JavaScript CPU Profiler и заставить всех работать с новым рабочим процессом.
В этом небольшом руководстве по миграции показано, как записать профиль JS на панели «Производительность» и как пользовательский интерфейс панели «Производительность» сопоставляется со старым рабочим процессом, к которому вы привыкли.
Доступ к старому профилировщику ЦП JavaScript
Если вы предпочитаете старый рабочий процесс «Запись профиля ЦП JavaScript», который раньше был доступен на панели «Профили», вы все равно можете получить к нему доступ следующим образом:
- Откройте главное меню DevTools.
- Выберите Дополнительные инструменты > Профилировщик JavaScript . Старый профилировщик открывается на новой панели под названием JavaScript Profiler .
Как записать профиль JS
- Откройте Инструменты разработчика.
Откройте вкладку «Производительность» .
Рисунок 1 . Панель «Производительность». Запишите одним из следующих способов:
- Чтобы профилировать загрузку страницы, нажмите «Записать загрузку страницы» . DevTools автоматически запускает запись, а затем автоматически останавливает ее, когда обнаруживает, что страница завершила загрузку.
- Чтобы профилировать работающую страницу, нажмите «Запись» , выполните действия, которые вы хотите профилировать, а затем нажмите «Стоп» , когда закончите.
Как старый рабочий процесс соотносится с новым
В представлении «Диаграмма» старого рабочего процесса на снимке экрана ниже показано положение обзорной диаграммы использования ЦП (стрелка вверху) и диаграммы пламени (стрелка внизу) в новом рабочем процессе.

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

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

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