使用更多数据共享性能跟踪

性能工具记录的数据可以导出到磁盘上的文件，其中还可以包括注释、资源内容 (HTML、CSS 和 JavaScript 内容) 以及源映射。导出的文件称为跟踪。导出的跟踪是可随时 .json 在 DevTools 中导入的文件。

从性能工具导出跟踪时，可以选择是否包括其他数据：

附注。
资源内容 (，例如 HTML、CSS 和 JavaScript 内容) 。
脚本源映射。

还可以控制是否压缩跟踪文件。

性能工具记录有关网页的运行时数据。浏览记录的数据可以提高网页的运行时性能。

如果要与其他人共享这些文件，以获取有关调查问题的帮助，导出性能跟踪非常有用。

可以保存跟踪以包括批注、资源内容 (（例如脚本) ）和网页中的源映射。借助此附加信息，可以更轻松地分析导入的跟踪文件，方法是重新创建记录跟踪的环境，并提供原始源文件。

导出的跟踪文件与基于Chromium引擎的其他浏览器兼容。

在 DevTools 中导入包含注释、资源内容 (（如脚本) 或源映射）的跟踪时，将显示一个新的 DevTools 窗口。此新窗口未连接到浏览器中运行的网页，而是重新创建最初记录跟踪的环境的一部分。此 DevTools 实例仅包含性能和源工具。

从性能工具导出跟踪

若要记录网页的各个方面的性能，然后导出性能记录，请执行以下作：

在新窗口或选项卡中打开网页，例如 “待办事项”。
右键单击网页，然后选择“ 检查”。

DevTools 随即打开。
在 DevTools 中，打开 “性能 () 工具。
单击“ 记录 () 按钮。
与网页交互，以运行要调查其性能的方案。

例如，在演示页的“ 添加任务 ”文本框中，键入 task 1，然后按 Enter。
单击“ 停止 () 按钮。

此时会显示性能配置文件。
单击“ 保存跟踪 () 按钮。

“ 保存性能跟踪 ”对话框将在性能工具) 打开 (：
选中或清除复选框，以控制跟踪文件中要包含的信息：
- “ 包括批注 ”复选框。仅当存在批注时，才会显示此复选框。
- “包括资源内容”复选框。
- “包括脚本源映射”复选框。 (必须首先选中“ 包括资源内容 ”复选框。)
（可选）清除“ 使用 gzip 压缩 ”复选框。

下面提供了有关这些复选框的详细信息。
单击“ 保存” 按钮。

“性能”工具中的小对话框将关闭，并打开“另存为”对话框。
导航到要将跟踪文件保存到磁盘上的文件夹。

例如，在 Windows /Downloads/ 上的目录中，单击“ 新建文件夹 ”按钮，然后创建一个 /traces/ 目录，在其中保存性能跟踪文件：
接受或修改文件名，例如 Trace-20251103T154500.json。
单击“ 保存” 按钮。

保存性能跟踪文件，例如 C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json。

包含批注

在性能工具中的“保存性能跟踪”对话框中，“包括注释”复选框控制是否包含已添加到性能配置文件的注释。

批注有助于吸引人们对跟踪的特定部分的注意并突出显示，从而在查看跟踪时更容易理解详细信息。

另请参阅：

批注录制内容并在性能功能参考中共享。

包括资源内容

在性能工具的“保存性能跟踪”对话框中，选中“包括资源内容”复选框，包括导出跟踪文件中的 HTML 文件、CSS 文件和 JavaScript 脚本的内容。除扩展) 之外，所有加载的脚本 (都保存在跟踪文件中。

当跟踪文件随后导入 DevTools 时，可以在源工具中查看这些资源。源工具解析在导入的跟踪中找到的源代码引用，以显示原始源代码。

扩展脚本

某些性能见解需要资源内容 (例如脚本) 进行分析。即使选中此复选框，扩展脚本的内容也不会包含在跟踪文件中，因为扩展脚本可能包含敏感信息。

但是，扩展脚本中的分析数据仍保存在跟踪文件中，因为扩展脚本可能会影响性能。

另请参阅：

JavaScript 调试功能
在任何网页上运行 JavaScript 的代码片段
使用“代码段”选项卡可在源工具概述中的任何网页上运行 JavaScript 代码片段。
使用“源”工具概述中Microsoft Edge 扩展的“内容脚本”选项卡。

包括脚本源映射

在“性能”工具中的“保存性能跟踪”对话框中，选中“包括脚本源映射”复选框，包括缩小的生产内容文件和映射回到原始源代码文件。 DevTools 使用源映射来加载原始文件，并将缩小的代码替换为原始代码。

随后打开生成的跟踪文件时，性能工具将显示原始函数名称，源工具将显示原始文件名。警告：这可能会向跟踪文件接收方公开源代码。

某些性能见解需要源映射进行分析。请参阅性能功能参考中的获取可作见解。

若要使此复选框可用，而不是灰显，必须选中“ 包括资源内容 ”复选框，其中包括跟踪文件中的脚本内容。

另请参阅：

将处理过的代码映射到原始源代码，以便进行调试

使用 gzip 进行压缩

在性能工具的“保存性能跟踪”对话框中，默认选中“使用 gzip 进行压缩”复选框。此选项有助于压缩大型性能跟踪以节省磁盘空间，并使跟踪文件的导入和处理在 DevTools 中更快。

如果选中此复选框，则默认文件扩展名为 .gz。
如果清除此复选框，则默认文件扩展名为 .json。

在 DevTools 中打开性能跟踪文件

在 DevTools 中打开跟踪文件 (导入) 时，浏览器中将打开一个新的专用“DevTools”选项卡，仅包含“性能和源”工具。跟踪可以包括注释、资源内容 (（例如脚本) ）和源映射。此新选项卡未连接到浏览器中运行的网页，而是重新创建最初记录跟踪的环境的一部分。

若要在 DevTools 中打开已保存的跟踪文件，请执行以下作：

打开Microsoft Edge 或其他基于Chromium的浏览器。
右键单击网页或空选项卡，然后选择“ 检查”。

DevTools 随即打开。
在 DevTools 中，选择 “性能 () 工具。
单击“ 加载跟踪 () 按钮。

“ 打开 ”对话框随即打开。
导航到共享跟踪文件，例如 C:\Users\localAccount\Downloads\traces\Trace-20251103T154500.json.gz。
选择文件，例如压缩文件 Trace-20251103T154500.json.gz。
单击“ 打开 ”按钮。

浏览器中会打开一个特殊的“DevTools”选项卡，其中完全填充了 DevTools，打开“源和性能”工具：

地址栏显示特殊 URL，例如：
- devtools://devtools/bundled/trace_app.html
- devtools://devtools/bundled/rehydrated_devtools_app.html
这是浏览器的一个特殊的 DevTools 专用选项卡，而不是未停靠的 DevTools 窗口。可以通过单击“更多工具”按钮来访问一些可能对分析跟踪有用的其他相关工具，例如：
- 开发人员资源
- 快速源
- 渲染
- 搜索
- 传感器