Бөлісу құралы:

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

Данные, записанные средством "Производительность ", можно экспортировать в файлы на диске, которые также могут содержать заметки, содержимое ресурсов (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/ каталог, в котором будет сохранен файл трассировки производительности:

    Папка traces

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

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

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

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

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

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

См. также:

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

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

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

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

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

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

См. также:

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

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

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

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

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

См. также:

Сжатие с помощью 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. Для доступа к нескольким другим соответствующим средствам, которые могут быть полезны для анализа трассировки, можно получить доступ, нажав кнопку Дополнительные инструменты , например:

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

См. также:

См. также

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

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

GitHub:

Документы Chrome:

  • Last updated on