发布时间：2024 年 11 月 13 日
假设您正在查看性能轨迹，并希望突出显示特定区域，例如最长任务或不必要的工作块。您可能想记下一些内容以供日后参考，或者与同事分享您的发现。实现这一目标的最佳方式是什么？
当然，您也可以将轨迹输出到大张纸上，然后手动绘制和书写备注，或者使用第三方软件在轨迹的屏幕截图上绘制备注！（不过，这一直是最佳方式。）
为了简化开发者工作流程，我们团队一直在努力，现在，我们很高兴地向您介绍这些选项的替代方案：能够直接在性能面板中向轨迹添加注释！
现在，您可以在原地为轨迹添加注释，轻松浏览这些注释，甚至可以直接将其保存在轨迹文件中。这样一来，分享突出显示的数据洞见就如同发送文件一样简单，而无需使用外部工具或权宜解决方法。注释不仅有助于您调试性能，还可以帮助您快速与同事达成共识，或让他们更深入地了解所发生的情况，而无需反复沟通。
注解有三种类型：
带注释的时间范围：为时间轴中的任何时间范围添加标签
带注释的条目：向时间轴中的任何条目添加标签
条目连接：使用箭头将任意两个条目连接起来，以显示它们之间的关系
我们来看看每种注释类型，以及您可能需要使用这些注释的场景。
带注释的时间范围
DevTools 中的常见工作流程是录制轨迹以调试互动缓慢的问题。轨迹视图一开始看起来可能很复杂，但当您深入了解特定事件处理脚本和调用堆栈后，就会发现其中的意义。为了更轻松地使用轨迹视图，您可以创建注释来标记一段时间的一般用途。例如，为时间范围添加注释可能有助于界面在用户互动后进行有意义的更新。
为时间范围添加注释：按住 Shift 键，然后从互动开始时间拖动到界面更新。然后，输入标签以创建注释。如果所选范围不正确，请在输入内容之前点击取消。或者，如需修改注释的标签，请双击该注释。目前，您无法调整现有注释的时间范围。如果时间范围不正确，请删除注释并创建新的注释。
借助此注解，您可以更清楚地了解在用户可见的更改发生之前必须完成的所有工作，从而相应地集中进行调试。
已添加注解的条目
为了让用户可见的更改更明显，您还可以使用条目标签为负责转换的任务添加注解。
为条目创建标签：双击所选条目并输入标签，或右键点击该条目，然后从上下文菜单中选择“为条目添加标签”。如需修改注释的标签，请双击条目或标签。或者，从上下文菜单中选择“标签条目”选项。
借助这些条目注释，您可以更轻松地发现对互动至关重要（或不重要）的工作以及所需时间。
条目连接
为轨迹添加注释的第三种方法是，在互动和负责转换的长任务之间绘制连接。
在条目之间建立关联：双击要与其他条目建立关联的条目，然后点击该条目右侧显示的箭头。接下来，点击要将其关联到的条目。或者，右键点击相应条目，然后从条目上下文菜单中选择“关联条目”。
因此，即使互动本身已结束，您也可以使用此类注解更清楚地显示它与最终阻塞界面的后续长任务之间的关联。
删除和隐藏注释
您可以从侧边栏中的注释列表视图中快速删除所有注释。将鼠标悬停在注释上会显示回收站图标 。点击此图标可删除注释。
或者，如需删除与特定事件关联的条目标签和条目关联注释，请右键点击该事件，然后选择“删除注释”。您还可以通过移除标签并保存注释来删除带有标签的注释。
如果您想隐藏注释（而不删除它们），以免它们干扰您浏览轨迹，只需选中注释边栏底部的“隐藏注释”复选框即可。系统会保存此偏好设置。当此设置处于启用状态时，如果您加载包含注释的轨迹，注释将保持隐藏状态，直到您取消选中该复选框。
保存或加载带注释的轨迹
太棒了，您添加了所有这些注解，以便您自己和其他人理解轨迹。后续操作
与注释功能出现之前的旧版相比，您无需截取轨迹的屏幕截图，即可将其发送给同事。只需保存注释文件，然后将该文件发送给他们即可。这样就大功告成了！他们可以将文件上传到性能面板，查看您在轨迹上下文中添加的所有注释，甚至可以添加更多注释并将其发回给您！
DevTools 还会在轨迹视图中保存其他类型的自定义。例如，您可以通过放大和设置面包屑导航来隔离感兴趣的区域，或隐藏不相关调用堆栈中的条目，所有这些设置都将由轨迹文件保留，从而更轻松地协作进行性能调试。借助所有这些自定义功能，您可以突出显示最重要的内容，同时提供整个交互式轨迹的上下文（与屏幕截图不同）。
如需保留注释和其他自定义内容，请点击下载图标 下的保存轨迹选项。加载轨迹后，轨迹将包含所有这些自定义内容。保存带注释的轨迹是默认选项，但如果您只想保存原始轨迹文件，请选择保存不带注释的轨迹选项。
总结
这些信息可能看起来很多，但不用担心！如需了解如何创建注释，请随时参阅效果面板边栏的“注释”标签页。当没有注释时，此标签页会提供相关说明；创建注释后，此标签页会显示注释的列表视图。
同样，性能面板中的注释可让开发者精确找到轨迹中的关键时刻，添加个性化背景信息和数据分析。这简化了分析流程，让您可以更轻松地分享和协作优化效果。请在“效果”面板中试用注释，并告诉我们您的想法。如果您有任何反馈，欢迎在公开问题中留言。
告别外部工具，拥抱更高效的工作流程！