在性能配置文件中显示原始函数名称

如果生成过程编译并最小化代码并将其合并到单个文件中，则性能配置文件中显示的函数名称可能难以理解。源映射将编译的缩小代码映射到原始源代码文件。性能工具可以使用源映射在录制后映射缩小的函数名称，并将其映射回原始代码中找到的原始名称。

若要详细了解 DevTools 如何使用源映射，请参阅将已处理的代码映射到原始源代码进行调试。

若要在性能工具的火焰图中查看原始函数名称，请使用 Unminify () 按钮。

DevTools 中使用源映射来保持客户端代码可读和可调试。单击性能工具中的“ Unminify ”按钮，可以使用源映射创建记录的性能配置文件的未压缩版本。

性能配置文件火焰图的示例，具有难以读取的函数名称：

性能配置文件火焰图的示例，其中还原了一些更有意义的函数名称：

在 性能工具中 记录性能配置文件时，配置文件的 Main 部分会显示在录制期间调用的 JavaScript 函数的详细火焰图。

理想情况下，在此火焰图视图中，你希望查看原始源代码中显示的有意义的函数名称。但是，如果生产代码已编译、缩小或捆绑， 则性能 工具最初会显示从已转换 的生产 代码中提取的函数名称。这些生产函数名称可能模糊不清，并且可能不容易映射到原始源代码中的函数名称。

若要统一性能配置文件，以便除了缩小的标识符外，还会显示一些更有意义的函数名称，请执行以下步骤。

步骤 1 - 设置源映射

将源映射与生产代码并排托管。取消管理时，性能工具需要查找源映射以及生产代码。

在 “性能 ”工具中，单击“ 记录 ”按钮，以记录要分析的页面的性能配置文件。有关详细信息，请参阅记录运行时性能。

性能配置文件在性能工具中记录。
在“性能”工具中，单击火焰图) (main区域，然后使用鼠标滚轮进行放大。单击并向左和向右拖动。查看火焰图中的函数名称。

性能工具中的火焰图显示生产代码中的缩小函数名称，例如 XI、Gi、d、o、a、c、co 和 a：

单击“ Unminify ” () 按钮：

在 DevTools 中，会短暂显示一个弹出窗口，内容为： 状态：创建未压缩的文件。然后，将打开“ 另存为 ”对话框。默认文件名是一种以日期和时间开头的模式，例如 yymmddThhmmss： Profile-20220307T164948-unminified.json。默认目录是 Downloads 目录。
选择文件名和目录，然后单击“ 保存 ”按钮。

性能工具创建记录的性能配置文件的新版本，使用源映射将火焰图中的某些函数名称替换为更有意义的函数名称。某些缩小的生产名称可能仍会显示，因为源映射并不总是提供性能工具映射所有函数名称所需的信息。

在 “性能 ”工具中，单击“ 加载配置文件 ” (“ 图标按钮。或者，右键单击 “性能 ”工具的空白区域，然后选择“ 加载配置文件”。
在“ 打开 ”对话框中，选择刚下载的未压缩性能配置文件 .json 。如果需要，有关详细信息，请参阅性能功能参考中的加载录制，然后继续下面的内容。

现在，某些函数名称是未修改的。性能工具中的未压缩火焰图现在显示那些用从源映射中获取的更有意义的名称标记的函数，例如 useObserver (d) 、useQueuedForceUpdateBlock (o) 、trackDerivedFunction () 、initializeIconColorMap (c) 、getExtraToolControls (co) ，isToggleEnabled () 。