Совместное использование трассировки производительности с дополнительными данными

Данные, записанные средством "Производительность ", можно экспортировать в файлы на диске, которые также могут содержать заметки, содержимое ресурсов (HTML, CSS и содержимое JavaScript) и исходные карты. Экспортированные файлы называются трассировками. Экспортированная трассировка — это .json файл, который можно импортировать в DevTools в любое время.

При экспорте трассировки из средства производительности можно выбрать, следует ли включать дополнительные данные:

• Аннотации.
• Содержимое ресурсов (например, HTML, CSS и JavaScript).
• Исходные карты скриптов.

Вы также можете управлять сжатием файла трассировки.

Средство "Производительность " записывает данные среды выполнения о веб-странице. Изучение записанных данных позволяет повысить производительность веб-страницы в среде выполнения.

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

Трассировки можно сохранить для добавления заметок, содержимого ресурсов (например, скриптов) и исходных карт с веб-страницы. Эти дополнительные сведения упрощают анализ импортированного файла трассировки, воссоздавая среду, в которой была записана трассировка, и предоставляя исходные исходные файлы.

Экспортированные файлы трассировки совместимы с другими браузерами, основанными на подсистеме Chromium.

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

Экспорт трассировки из средства производительности

Чтобы записать производительность для аспектов веб-страницы, а затем экспортировать запись о производительности:

1. Откройте веб-страницу, например "Сделать", в новом окне или вкладке.

2. Щелкните веб-страницу правой кнопкой мыши и выберите Пункт Проверить.

   Откроется devTools.

3. В средствах разработки откройте средство Производительность ().

4. Нажмите кнопку Запись ().

5. Взаимодействуйте с веб-страницей, чтобы запустить сценарий, в котором вы хотите изучить производительность.

   Например, на демонстрационной странице в текстовом поле Добавить задачу введите task 1и нажмите клавишу ВВОД.

6. Нажмите кнопку Стоп ().

   Откроется профиль производительности.

7. Нажмите кнопку Сохранить трассировку (

   Откроется диалоговое окно Сохранение трассировки производительности (в средстве производительности ):

   

8. Установите или снимите флажки, чтобы указать, какие сведения следует включить в файл трассировки:

   • Флажок Включить заметки . Этот флажок отображается только при наличии заметок.

   • Флажок Включить содержимое ресурса .

   • Флажок Включить исходные карты скриптов. (Сначала необходимо установить флажок Включить содержимое ресурса .)

   При необходимости снимите флажок Сжатие с помощью gzip .

   Подробные сведения об этих флажки приведены ниже.

9. Нажмите кнопку Сохранить .

   Небольшое диалоговое окно в средстве Производительность закрывается, и откроется диалоговое окно Сохранить как .

10. Перейдите в папку, в которой нужно сохранить файл трассировки на диске.

    Например, в Windows в каталоге /Downloads/ нажмите кнопку Создать папку , а затем создайте /traces/ каталог, в котором будет сохранен файл трассировки производительности:

    

11. Примите или измените имя файла, например Trace-20251103T154500.json.

12. Нажмите кнопку Сохранить .

    Файл трассировки производительности сохраняется, например C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.

Добавление заметок

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

Заметки помогают привлечь внимание к определенным разделам трассировки и выделить их, упрощая понимание подробностей при просмотре трассировки.

См. также:

• Примечайте запись и поделитесь ею в справочнике по функциям производительности.

Включение содержимого ресурса

В диалоговом окне Сохранение трассировки производительности в средстве Производительность установите флажок Включить содержимое ресурсов , включает содержимое HTML-файлов, CSS-файлов и скриптов JavaScript в экспортируемом файле трассировки. Все загруженные скрипты (кроме расширений) сохраняются в файле трассировки.

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

Скрипты расширений

Для анализа некоторых аналитических сведений о производительности требуется содержимое ресурсов (например, скрипты). Содержимое скриптов расширений не включается в файл трассировки, даже если этот флажок установлен, так как скрипты расширений могут содержать конфиденциальную информацию.

Однако данные профилирования из скриптов расширений по-прежнему сохраняются в файле трассировки, так как скрипты расширений могут повлиять на производительность.

См. также:

• Функции отладки JavaScript
• Запуск фрагментов Кода JavaScript на любой веб-странице
• Использование вкладки "Фрагменты" для запуска фрагментов кода JavaScript на любой веб-странице в обзоре средства "Источники".
• Использование вкладки Скрипты содержимого для расширений Microsoft Edge в обзоре средства "Источники".

Включение исходных карт скриптов

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

При последующем открытии результирующего файла трассировки средство "Производительность " отобразит исходные имена функций, а средство "Источники" — исходные имена файлов. Внимание! Это может предоставить исходный код получателю файла трассировки.

Для анализа некоторых аналитических сведений о производительности требуются карты источников. См . статью Получение аналитических сведений с действиями в справочнике по функциям производительности.

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

См. также:

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

Сжатие с помощью gzip

В диалоговом окне Сохранение трассировки производительности в средстве Производительность по умолчанию установлен флажок Сжатие с помощью gzip . Этот параметр помогает сжимать большие трассировки производительности для экономии места на диске, а также ускоряет импорт и обработку файлов трассировки в средствах разработки.

• Если этот флажок установлен, расширение имени файла по умолчанию — .gz.
• Если этот флажок снят, расширение имени файла по умолчанию — .json.

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

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

Чтобы открыть сохраненный файл трассировки в средствах разработки, выполните следующее:

1. Откройте Microsoft Edge или другой браузер на основе Chromium.

2. Щелкните правой кнопкой мыши веб-страницу или пустую вкладку и выберите пункт Проверить.

   Откроется devTools.

3. В средствах разработки выберите средство Производительность ().

4. Нажмите кнопку Загрузить трассировку ().

   Откроется диалоговое окно Открыть .

5. Перейдите к общему файлу трассировки, например C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz.

6. Выберите файл, например zip-файл Trace-20251103T154500.json.gz.

7. Нажмите кнопку Открыть .

   В браузере откроется специальная вкладка DevTools, полностью заполненная средствами разработки, открывая инструменты "Источники " и "Производительность ":

   

   В адресной строке отображается специальный URL-адрес, например:

   • devtools://devtools/bundled/trace_app.html
   • devtools://devtools/bundled/rehydrated_devtools_app.html

   Это специальная вкладка, посвященная DevTools, в браузере, а не в отстыковке окна DevTools. Для доступа к нескольким другим соответствующим средствам, которые могут быть полезны для анализа трассировки, можно получить доступ, нажав кнопку Дополнительные инструменты , например:

   • Ресурсы разработчиков
   • Быстрый источник
   • Перевод
   • Поиск
   • Датчики

См. также:

• Средство повышения производительности. Анализ производительности веб-сайта
• Общие сведения о средстве "Источники"

См. также

• Совместное использование трассировки памяти с дополнительными данными

Средство "Источники ":

• Общие сведения о средстве "Источники"
  • Использование вкладки Скрипты содержимого для расширений Microsoft Edge в обзоре средства "Источники".
  • Использование вкладки "Фрагменты" для запуска фрагментов кода JavaScript на любой веб-странице в обзоре средства "Источники".
• Функции отладки JavaScript
• Запуск фрагментов Кода JavaScript на любой веб-странице
• Сопоставление обработанного кода с исходным исходным кодом для отладки

Средство повышения производительности :

• Средство повышения производительности. Анализ производительности веб-сайта
• Справочник по функциям производительности
  • Примечайте запись и поделитесь ею в справочнике по функциям производительности.
  • Получите полезные сведения в справочнике по функциям производительности.

GitHub:

• Для демонстрации .

Документы Chrome:

• Сохранение и совместное использование трассировок производительности