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

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

Кроме того, записанные данные можно экспортировать в файлы на диске. Экспортированные файлы называются трассировками.

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

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

Использование расширенных трассировок позволяет надежно разрешать ссылки на исходный код, найденные в импортированных трассировках, в фактический код среды выполнения в средстве Источники . Кроме того, если исходные карты присутствовали при записи трассировки или если они хранятся на сервере символов Azure Artifacts, также можно будет разрешить ссылки на код в исходный исходный код.

Различия между обычными и расширенными трассировками

Обычные трассировки

Обычная трассировка содержит только некоторые сведения, которые присутствуют на веб-странице. Большая часть исходного кода теряется, и в трассировке сохраняются только записанные данные о производительности или памяти веб-страницы. Например, при импорте трассировки памяти, записанной .heapsnapshot во время другого сеанса DevTools или на другом компьютере, невозможно перейти от объекта в средстве "Память " к его конструктору в средстве "Источники ".

Аналогичным образом, в средстве производительности при импорте трассировки производительности, записанной ранее:

• Трассировка должна быть записана на том же сайте и в той же конфигурации, чтобы иметь возможность сопоставлять из отчета о производительности с JavaScript, запущенным в браузере.
• Если имена файлов или функций изменились с момента записи, сопоставление может приводить к ошибкам.

Улучшенные трассировки

Расширенная трассировка сохраняет гораздо больше сведений о веб-странице, на которой была проведена запись. Например, расширенная трассировка содержит контекст выполнения и список проанализированных скриптов, а также может при необходимости содержать сообщения консоли, источники скриптов и snapshot дерева DOM.

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

Например, если snapshot модели DOM была записана в расширенной трассировке, средство Элементы отображает этот snapshot. Если сообщения консоли были записаны, средство "Консоль" выводит эти сообщения. Средство Источники отображает скрипты, которые присутствовали во время записи.

Расширенные трассировки можно импортировать только в Microsoft Edge, в то время как обычные трассировки совместимы с другими браузерами на основе подсистемы Chromium.

Установка типа трассировки по умолчанию

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

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

1. Откройте средства разработки, нажав клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS).

2. В средствах разработки в правом верхнем углу щелкните Параметры (). Откроется окно "Параметры " с выбранной страницей "Параметры ".

3. В разделе Сохраняемость на странице Параметры установите флажок Экспорт трассировок повышенной производительности и памяти :

   

4. Расширенные трассировки также могут включать сообщения консоли, источники скриптов и элементы DOM. Чтобы определить, что следует включить в расширенные трассировки, используйте следующие флажки:

   • Включите сообщение консоли в расширенные трассировки.
   • Включение источников скриптов в расширенные трассировки.
   • Включите моментальные снимки модели DOM в расширенные трассировки (экспериментальные).

   

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

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

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

2. Щелкните Записать и запустите сценарий, в котором вы хотите проверить производительность, взаимодействуя с веб-страницей, а затем нажмите кнопку Остановить.

3. Когда появится профиль производительности, нажмите кнопку Сохранить профиль ():

   

4. Выберите расположение для сохранения файла трассировки на диске:

   

   Трассировка — это файл, .json если тип трассировки по умолчанию задан как обычный, и файл, .devtools если для типа трассировки по умолчанию задан расширенный.

Экспорт трассировки из средства "Память"

Чтобы экспортировать сведения о памяти из средства "Память ", выполните следующие действия:

1. Откройте средство "Память ".

2. Выберите нужный тип записи памяти, например Моментальный снимок кучи. Следующие инструкции аналогичны, если выбран другой тип записи в памяти. Дополнительные сведения о различных типах записи памяти см. в статье Устранение проблем с памятью.

3. Щелкните Создать моментальный снимок.

4. После записи snapshot нажмите кнопку Сохранить на боковой панели средства "Память":

   

5. Выберите расположение для сохранения файла трассировки на диске:

   

   Если для типа трассировки по умолчанию задан обычный .heapsnapshot.heapprofileтип трассировки, это файл , или .heaptimeline , если .devtools для типа трассировки по умолчанию задан расширенный тип трассировки.

Выбор типа трассировки при экспорте

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

Чтобы выбрать другой тип трассировки при экспорте:

1. Щелкните правой кнопкой мыши (или удерживайте клавишу CTRL ) и выберите сохранить профиль () в средстве производительность или кнопку Сохранить в средстве "Память ".

2. Выберите .devtools (расширенный формат для Microsoft Edge), чтобы экспортировать расширенную трассировку, или json (работает с Microsoft Edge и браузерами Chromium), если требуется обычная трассировка.

   

Импорт трассировки в средство "Производительность"

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

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

2. Щелкните Загрузить профиль ():

   

3. Найдите файл трассировки на диске. Это файл .devtools (для расширенных трассировок) или .json файл (для обычных трассировок):

   

4. Откройте файл.

   Если файл является расширенной трассировкой, появится новое окно DevTools с профилем производительности и дополнительными сведениями о среде выполнения, которые были записаны в средствах "Источники", "Консоль" и "Элементы ".

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

Импорт трассировки в средство "Память"

Чтобы импортировать трассировку в средство "Память ", выполните следующие действия:

1. Откройте средство "Память ".

2. Нажмите кнопку Загрузить.

   

3. Найдите файл трассировки на диске. Это либо .devtools файл (для расширенных трассировок), либо .heapsnapshotфайл , .heaptimelineили .heapprofile файл (для обычных трассировок).

   

4. Откройте файл.

   Если файл является расширенной трассировкой, появится новое окно DevTools, в котором отображаются сведения о памяти и дополнительные сведения о среде выполнения, которые были записаны в средствах "Источники", "Консоль" и "Элементы ".

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

Поделитесь отзывом об улучшенных трассировках

Расширенные трассировки — это экспериментальная функция, которая, надеюсь, упрощает совместную работу по устранению проблем с производительностью и памятью, видя неминифицированный код.

Команда Microsoft Edge DevTools приветствует любые отзывы, которые могут иметься в отношении расширенных трассировок. Если вы пробовали эту новую функцию, сообщите о любых проблемах или идеях о ней в репозитории GitHub.