Отображение исходных имен функций в профилях производительности

Если процесс сборки компилирует и минифизирует код и объединяет его в один файл, имена функций, отображаемых в профиле производительности, могут быть трудно понять. Исходные карты сопоставляют скомпилированный, минифицированный код с исходными файлами исходного кода. Средство "Производительность " может использовать исходные карты для сопоставления минифицированных имен функций после записи с их исходными именами, найденными в исходном коде.

Дополнительные сведения о том, как DevTools использует исходные карты, см. в статье Сопоставление обработанного кода с исходным исходным кодом для отладки.

Чтобы просмотреть исходные имена функций на диаграмме пламени в средстве Производительность , используйте кнопку Unminify ().

Сопоставление источников используется в средствах разработки, чтобы обеспечить читаемый и отлаживаемый код на стороне клиента. Нажав кнопку Unminify в средстве производительности, вы можете использовать карты источников для создания неминифицированной версии записанного профиля производительности.

Пример диаграммы пламени профиля производительности с трудночитаемыми именами функций:

Пример диаграммы пламени профиля производительности с восстановленными более значимыми именами функций:

При записи профиля производительности в инструменте Производительность в разделе Main профиля отображаются подробные диаграммы пламени функций JavaScript, которые были вызваны во время записи.

В идеале в этом представлении диаграммы пламени вы хотите увидеть значимые имена функций, которые отображаются в исходном исходном коде. Однако если рабочий код скомпилирован, минимифицирован или упаковывается, средство производительности изначально отображает имена функций, извлеченные из преобразованного рабочего кода. Эти имена рабочих функций могут быть неясными и не могут быть легко сопоставлены с именами функций в исходном исходном коде.

Чтобы отменить описание профиля производительности, чтобы в дополнение к минифицированным идентификаторам отображались более значимые имена функций, выполните следующие действия.

Шаг 1. Настройка исходных карт

Размещение исходных карт параллельно с рабочим кодом. При отмене функции средство "Производительность " будет находить исходные карты вместе с рабочим кодом.

Дополнительные сведения см. в разделе Сопоставление обработанного кода с исходным исходным кодом для отладки.

Шаг 2. Запись профиля производительности

1. В средстве Производительность нажмите кнопку Записать , чтобы записать профиль производительности для страницы, которую требуется проанализировать. Дополнительные сведения см. в разделе Запись производительности среды выполнения.

   

   Профиль производительности записывается в средстве производительности .

2. В средстве Производительность щелкните область main (диаграмма пламени) и используйте колесико мыши для увеличения масштаба. Щелкните и перетащите ее влево и вправо. Просмотрите имена функций на диаграмме пламени.

   На диаграмме пламени в средстве производительности отображаются минифицированные имена функций, такие как XI, Gi, d, o, an, c, co и a из производственного кода:

   

Шаг 3. Отмена минификации кода

1. Нажмите кнопку Unminify ().

   

   В DevTools кратко появится всплывающее окно Со следующим текстом : Состояние: создание незаминированного файла. Затем откроется диалоговое окно Сохранить как . Имя файла по умолчанию — это шаблон, начинающийся с даты и времени, например yymmddThhmmss: Profile-20220307T164948-unminified.json. Каталогом по умолчанию является каталог Загрузки .

2. Выберите имя файла и каталог, а затем нажмите кнопку Сохранить .

   Средство "Производительность " создает новую версию записанного профиля производительности, при этом некоторые имена функций из диаграммы пламени заменяются более значимыми именами функций с помощью исходных карт. Некоторые из минифицированных рабочих имен могут по-прежнему отображаться, так как карты источников не всегда предоставляют необходимые сведения для средства производительности для сопоставления всех имен функций.

Шаг 4. Загрузка неминифицированного профиля

1. В средстве Производительность нажмите кнопку Загрузить профиль (). Кроме того, щелкните правой кнопкой мыши пустую область средства производительности и выберите Пункт Загрузить профиль.

   

2. В диалоговом окне Открыть выберите файл профиля .json производительности без изменений, который вы только что скачали. При необходимости дополнительные сведения см. в статье Загрузка записи в справочнике по функциям производительности и далее.

   Некоторые имена функций теперь неминифицированы. На неминифицированной диаграмме пламени в средстве производительности теперь отображаются функции, помеченные более значимыми именами, взятыми из исходных карт, такими как useObserver (d), useQueuedForceUpdateBlock (o), trackDerivedFunction (an), initializeIconColorMap (c), getExtraToolControls (co)и isToggleEnabled (a).

   

См. также

• Общие сведения о средстве производительности . Общие сведения об анализе производительности среды выполнения в средствах разработки.
• Справочник по функциям производительности . Справочник по многим функциям, предлагаемым в средстве производительности.