news 2026/4/6 16:56:11

Web 开发指向标|AI 辅助功能在性能面板中的使用与功能

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
Web 开发指向标|AI 辅助功能在性能面板中的使用与功能

Chrome 开发者工具是一套 Web 开发者工具,直接内置于 Google Chrome 浏览器中,帮助您即时修改页面和快速诊断问题,让您能够更快地构建更好的网站。

  • Chrome 开发者工具

    https://developer.chrome.google.cn/docs/devtools/ai-assistance?hl=zh-cn

  • Google Chrome

    https://www.google.com/chrome/?hl=zh-cn

借助性能面板,您可以记录 Web 应用的 CPU 性能配置文件,分析配置文件,找出潜在的性能瓶颈,并了解如何优化资源使用情况。AI 辅助功能在此面板中能够发挥什么作用呢?您可以继续阅读,了解详细内容。

打开 AI 辅助

AI 辅助功能可以帮助您充分了解性能面板中记录的性能配置文件。

在性能面板中打开 AI 辅助功能前,请先记录性能分析报告。您可以根据要分析的内容,从各个性能洞察或性能轨迹视图中的活动打开 AI 辅助面板。

  • 记录性能分析报告

    https://developer.chrome.google.cn/docs/devtools/performance/overview?hl=zh-cn#record_a_performance_profile

性能数据分析

在数据分析标签页中,打开一项数据分析 (例如按阶段划分的 LCP),然后点击 "询问 AI" 按钮,即可向 AI 询问以下分析洞察:

  • 按阶段划分的 LCP

  • 发现 LCP 请求

  • 渲染屏蔽请求

  • 布局偏移原因

  • 文档请求延迟时间

在这种情况下,系统会预先选择此性能分析作为对话的上下文。

性能轨迹视图

您也可以在轨迹视图中,右键点击某项活动,然后选择 "询问 AI"。此时,系统会预先选择此活动作为对话的上下文。

除上述方式外,您仍然可以从命令菜单和 "更多工具" 菜单中打开 AI 辅助功能。

从命令菜单中打开

从 "更多工具" 菜单中打开

与 AI 助理对话的上下文

所选的表现活动记录会用作与 AI 助理对话的上下文。相应活动的引用会显示在面板的左下角。

性能数据分析

如果您在数据分析标签页中,点击了 "询问 AI" 按钮来获取特定效果分析,此分析将作为对话的背景信息。点击其他数据洞察下方的 "询问 AI" 按钮即可更改所选内容。

开始对话后,展开 Analyzing insight: ... 部分即可查看 AI 助理使用的原始数据。

性能轨迹视图

如果您在性能轨迹中选择了不同的项,那么上下文也会随之发生变化。

AI 辅助功能正在使用所选调用树 (call tree) 中的时间信息来回答您的问题。

开始对话后,点击 Analyzing call tree 条状标签中的展开按钮,即可查看 AI 助理使用的原始数据。

系统会根据您与 AI 之间的过往互动来回答后续问题,并保存对话记录,因此即使重新加载开发者工具或 Chrome,您也可以访问之前的对话。

使用面板左上角的控件来控制对话记录。蓝色方框中的按钮从左至右分别代表 "发起新对话"、"继续之前的对话"、"删除对话"

想了解更多 Chrome 开发者工具的实用技巧吗?请持续关注我们的系列文章,以及使用 AI 辅助功能的提示建议,助您快速上手。敬请期待更多精彩内容!


点击屏末||查看 Chrome 开发者工具的更多精彩文章

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!