Chrome DevTools 怎么导出并重新载入性能追踪

要把 Chrome DevTools 的性能追踪交给同事复盘，最稳妥的做法是：先在 Performance 面板完成一次录制，再从顶部下载菜单选择 Save trace 保存；需要复盘时，打开同一个面板，点击上传按钮选择该文件。重新载入后，时间线、Main 轨道和已有标注会回到面板中，可以继续缩放和定位事件。

官方资料：https://developer.chrome.com/docs/devtools/performance/

这里的 trace 是 Performance 面板的性能追踪文件，不是网页截图。保存前先决定是否需要附带资源内容或源码映射，否则文件可能更小，但接收者看到的上下文也会更少。

开始前确认录制已经完成

打开 Chrome DevTools，切换到 Performance。若还没有结果，点击 Record，完成要分析的交互，再点击 Stop；如果要分析页面加载，也可以使用面板提供的重新加载并录制入口。停止后等待面板处理数据，直到能看到 Overview、Main 或摘要区域。只有录制结果出现后，顶部的保存动作才有可用内容。

建议先用页面名、场景和日期给本次追踪做一个记号，例如 checkout-flow-2026-10-06。文件名只是协作约定，不会改变 trace 内容。

在 Performance 面板保存性能追踪

1. 在 Performance 面板顶部动作栏找到下载图标，打开菜单。
2. 选择 Save trace，等待保存选项对话框出现。
3. 根据协作需要决定是否包含注释、资源内容、源码映射；压缩选项用于减小文件体积。
4. 确认文件名和保存位置，点击保存。

选项怎么取舍：只想让对方查看时间线和事件时，可以保持较轻的保存配置；需要在 Sources 中进一步查看页面脚本时，再考虑包含资源内容和源码映射。若录制包含注释，保留注释能让接收者直接看到你标记的重点。资源和映射会增加文件体积，也可能带出不适合共享的页面代码，提交前应先确认范围。

重新载入并确认追踪可用

1. 在目标 Chrome 中打开 DevTools，进入 Performance 面板。
2. 点击顶部动作栏的上传图标，选择之前保存的 trace 文件。
3. 等待解析结束，确认 Overview 时间线重新出现；再点选 Main、Network 或 Insights 中的内容继续分析。

如果原追踪带有标注，重新载入后可以在 Annotations 区域查看。若只出现部分时间线，先确认文件是否完整下载，再检查保存时是否选择了所需的资源内容和源码映射；这些附加内容影响的是可复盘上下文，不会替代性能事件本身。

常见问题与边界

为什么菜单里没有可保存的内容？通常是还没有完成录制，或当前面板仍在处理数据。等时间线和摘要出现后再打开下载菜单。

为什么别人载入后看不到源码？保存时可能没有包含资源内容或源码映射，也可能是对方的 Chrome/DevTools 版本对界面和可用功能有所差异。先用最小 trace 确认时间线能打开，再按需要重新保存附加内容。

如何判断操作完成？面板重新出现性能时间线，并能选中事件、缩放范围或查看已有标注，就说明载入成功。最后把 trace 文件与页面版本、复现步骤一起交给接收者，避免只发一个无法解释的二进制文件。

小结

Chrome DevTools 导出并重新载入性能追踪的核心路径只有两段：Performance 面板录制完成后，用下载菜单的 Save trace 保存；在另一处用上传按钮载入。注释适合保留分析结论，资源内容和源码映射适合需要深入定位的场景，压缩则优先服务于文件传输。按这个边界准备文件，既能保留可复盘的性能时间线，也能控制共享范围。