Web 开发指向标|在来源面板中使用 Chrome 开发者工具的 AI 辅助功能

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

现在您已经通过以往文章了解到,AI 助理可以为您的网站进行样式设置以及了解您网站发送的请求。那么如何在来源面板中使用 AI 辅助功能呢?您将在本文中获得答案。

打开 AI 辅助

在来源面板中您可以查看和修改网站的资源,例如样式表、JavaScript 文件和图片。AI 辅助功能将帮助您了解您网站加载和使用的文件。

您可以通过以下三种方式打开 AI 辅助:

|----------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 在来源面板中,右键点击某个文件,选择 "询问 AI" 选项,所选文件即会被预设为对话的上下文。还可以将鼠标悬停在文件上,点击出现的浮动按钮。 | |
| 从命令菜单中输入 "AI",然后运行 "显示 AI 辅助" 命令 (旁边带有 Drawer 标记)。 | |
| 从 "更多工具" 菜单中 (在页面右上角的设置) 选择更多选项 > 更多工具 > AI 辅助。 | |

*点击图片即可放大查看

与 AI 助理对话的上下文

您在来源面板中选定的文件,会作为您与 AI 助理对话的上下文。面板的左下角会显示引用的文件。点击其他文件,即可更改上下文。

AI 助理会使用所选文件的名称、网址、源映射 (如有) 和内容来回答您的问题。

在开始对话后,点击 Analyzing file 条状标签中的展开按钮,即可查看 AI 辅助功能使用的原始数据。

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

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

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


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

相关推荐
艾莉丝努力练剑6 分钟前
hixl vs NCCL:昇腾生态通信库的独特优势分析
运维·c++·人工智能·cann
梦帮科技7 分钟前
Node.js配置生成器CLI工具开发实战
前端·人工智能·windows·前端框架·node.js·json
程序员泠零澪回家种桔子9 分钟前
Spring AI框架全方位详解
java·人工智能·后端·spring·ai·架构
Echo_NGC223712 分钟前
【FFmpeg 使用指南】Part 3:码率控制策略与质量评估体系
人工智能·ffmpeg·视频·码率
纤纡.22 分钟前
PyTorch 入门精讲:从框架选择到 MNIST 手写数字识别实战
人工智能·pytorch·python
大大大反派23 分钟前
CANN 生态中的自动化部署引擎:深入 `mindx-sdk` 项目构建端到端 AI 应用
运维·人工智能·自动化
程序猿追24 分钟前
深度解读 AIR (AI Runtime):揭秘 CANN 极致算力编排与调度的核心引擎
人工智能
2601_9495936528 分钟前
深入解析CANN-acl应用层接口:构建高效的AI应用开发框架
数据库·人工智能
●VON31 分钟前
CANN安全与隐私:从模型加固到数据合规的全栈防护实战
人工智能·安全
VT.馒头36 分钟前
【力扣】2695. 包装数组
前端·javascript·算法·leetcode·职场和发展·typescript