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

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

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

打开 AI 辅助

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

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

性能数据分析

在数据分析标签页中,打开一项数据分析 (例如按阶段划分的 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 开发者工具的更多精彩文章

相关推荐
TM1Club12 小时前
AI驱动的预测:新的竞争优势
大数据·人工智能·经验分享·金融·数据分析·自动化
陈天伟教授12 小时前
人工智能应用-机器听觉:15. 声纹识别的应用
人工智能·神经网络·机器学习·语音识别
zhang1338308907512 小时前
CG-09H 超声波风速风向传感器 加热型 ABS材质 重量轻 没有机械部件
大数据·运维·网络·人工智能·自动化
板面华仔12 小时前
机器学习入门(三)——决策树(Decision Tree)
人工智能·决策树·机器学习
GAOJ_K12 小时前
滚珠花键的无预压、间隙调整与过盈配合“场景适配型”
人工智能·科技·机器人·自动化·制造
ai_xiaogui12 小时前
【开源探索】Panelai:重新定义AI服务器管理面板,助力团队私有化算力部署与模型运维
人工智能·开源·私有化部署·docker容器化·panelai·ai服务器管理面板·comfyui集群管理
源于花海12 小时前
迁移学习的前沿知识(AI与人类经验结合、传递式、终身、在线、强化、可解释性等)
人工智能·机器学习·迁移学习·迁移学习前沿
layman052813 小时前
webpack5 css-loader:从基础到原理
前端·css·webpack
半桔13 小时前
【前端小站】CSS 样式美学:从基础语法到界面精筑的实战宝典
前端·css·html
AI老李13 小时前
PostCSS完全指南:功能/配置/插件/SourceMap/AST/插件开发/自定义语法
前端·javascript·postcss