共享增强的性能和内存跟踪

项目
09/07/2023

性能和内存工具记录有关网页的运行时数据。浏览记录的数据可以提高网页的内存使用率或运行时性能。

此外，记录的数据可以导出到磁盘上的文件。导出的文件称为跟踪。

如果要与其他人共享这些文件以获取有关调查问题的帮助，导出性能和内存跟踪非常有用。导出的跟踪是 .json可随时在 DevTools 中导入的、 .heapsnapshot、 .heapprofile或 .heaptimeline 文件。

默认情况下，跟踪包含来自跟踪网页的运行时数据的信息最少，但跟踪也可以导出为 增强跟踪，作为实验性功能。增强跟踪是一个 .devtools 文件，其中包含来自跟踪网页的更多运行时数据。增强的跟踪通过重新创建记录跟踪的环境以及提供原始源文件，可以更轻松地解决性能和内存问题。

使用增强的跟踪可以可靠地将导入跟踪中找到的源代码引用解析为源工具中的实际运行时代码。此外，如果记录跟踪时存在源映射，或者如果源映射存储在 Azure Artifacts 符号服务器上，则还可以解析对其原始源代码的代码引用。

正常跟踪和增强跟踪之间的差异

正常跟踪

普通跟踪仅包含网页中存在的一些信息。大部分原始代码丢失，跟踪中仅保留网页的记录性能或内存数据。例如，导入在另一个 DevTools 会话期间或在另一 .heapsnapshot 台计算机上记录的内存跟踪时，无法从内存工具中的对象转到源工具中的构造函数。

同样，在性能工具中，导入前面记录的性能跟踪时：

跟踪需要记录在同一站点和相同的配置上，才能从性能报告映射到在浏览器中运行的 JavaScript。
如果文件或函数名称自录制以来已更改，则映射容易出错。

增强的跟踪

增强的跟踪可保留有关进行录制的网页的详细信息。例如，增强跟踪包含执行上下文和分析的脚本列表，并且可以选择性地包含控制台消息、脚本源和 DOM 树的快照。

在 DevTools 中导入增强跟踪时，将显示一个新的 DevTools 窗口。此新窗口未连接到浏览器中运行的网页，而是重新创建最初记录跟踪的环境的一部分。

例如，如果在增强跟踪中记录了 DOM 的快照，则“元素”工具将显示此快照。如果记录了主机消息， 控制台 工具将打印这些消息。源工具显示录制期间存在的脚本。

增强的跟踪只能在 Microsoft Edge 中导入，而常规跟踪与基于Chromium引擎的其他浏览器兼容。

设置默认跟踪类型

默认情况下，性能和内存工具将数据导出为普通跟踪，但可以将默认跟踪类型设置为 enhanced。

更改跟踪类型：

按 Ctrl+Shift+I (Windows、Linux) 或 Command+Option+I (macOS) 打开 DevTools。
在 DevTools 的右上角，单击 “设置 () 。 此时会打开“设置 ”，并选中 “首选项” 页。
在“首选项”页的“持久性”部分中，选中“导出增强的性能和内存跟踪”复选框：
增强的跟踪还可以选择性地包括控制台消息、脚本源和 DOM 元素。若要控制要包含在增强跟踪中的内容，请使用以下复选框：
- 在增强的跟踪中包含控制台消息。
- 在增强的跟踪中包含脚本源。
- 在增强跟踪中包括 DOM 快照， (实验性) 。

从性能工具导出跟踪

若要从性能工具导出性能记录，请执行以下操作：

打开 “性能” 工具。
单击“ 记录 ”并运行要通过与网页交互来调查其性能的方案，然后单击“ 停止”。
出现性能配置文件时，单击“ 保存配置文件 ” () ：
选择在磁盘上保存跟踪文件的位置：

如果将默认跟踪类型设置为 normal，则跟踪是一个 .json 文件;如果将默认跟踪类型设置为增强，则跟踪是文件 .devtools 。

从内存工具导出跟踪

若要从内存工具导出内存信息， 请执行以下操作 ：

打开 “内存” 工具。
选择你感兴趣的内存录制类型，例如 堆快照。如果选择不同的内存记录类型，则以下说明类似。若要详细了解不同的内存记录类型，请参阅修复内存问题。
单击“ 创建快照”。
录制快照后，单击“内存”工具边栏中的“保存”按钮：
选择在磁盘上保存跟踪文件的位置：

如果将默认跟踪类型设置为 normal，则跟踪是 .heapsnapshot、 .heapprofile或 .heaptimeline 文件;如果将默认跟踪类型设置为增强，则跟踪是 .devtools 文件。

导出时选择跟踪类型

跟踪将导出为普通跟踪或增强跟踪，具体取决于 “导出增强的性能和内存跟踪 ”选项。若要更改默认跟踪类型，请参阅设置默认跟踪类型。还可以在导出时选择所需的跟踪类型。

若要在导出时选择其他跟踪类型，请执行以下操作：

右键单击 (或按住 Ctrl 键，然后单击) “性能”工具中的“保存配置文件 () 或“内存”工具中的“保存”按钮。
如果要导出增强的跟踪，请单击 Microsoft Edge) 的 .devtools (增强格式;如果需要正常跟踪，请单击“.json (适用于 Microsoft Edge 和Chromium浏览器) 。

在性能工具中导入跟踪

若要在性能工具中导入跟踪，请执行以下操作：

打开 “性能” 工具。
单击“ 加载配置文件 ” () ：
在磁盘上找到跟踪文件。 .devtools它是用于增强跟踪) 的文件 (，或者.json普通跟踪) 的文件 (：
打开此文件。

如果文件是增强跟踪，则会出现一个新的 DevTools 窗口，其中显示源、 控制台和元素工具中显示的性能配置文件和记录的额外运行时信息。

如果文件是普通跟踪，则性能配置文件将显示在 “性能 ”工具中，而“DevTools”选项卡的其余部分将继续显示与当前网页相关的信息。

在内存工具中导入跟踪

若要在内存工具中导入跟踪，请执行以下操作：

打开 “内存” 工具。
单击“ 加载”。
在磁盘上找到跟踪文件。 .devtools它是用于增强跟踪) 的文件 (，或者.heapsnapshot普通跟踪) 的、 .heaptimeline或 .heapprofile 文件 (。
打开此文件。

如果文件是增强跟踪，则会显示新的 DevTools 窗口，其中显示源、 控制台和元素工具中显示的内存信息和记录的额外运行时信息。

如果文件是普通跟踪，则内存信息将显示在 “内存 ”工具中，而“DevTools”选项卡的其余部分将继续显示与当前网页相关的信息。

增强跟踪是一项实验性功能，希望通过查看未修改的代码，更轻松地协作解决性能和内存问题。

Microsoft Edge DevTools 团队欢迎你对增强跟踪的任何反馈。如果已试用此新功能，请随时在我们的 GitHub 存储库上报告有关此功能的任何问题或想法。

通过