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