Appearance
核心功能详解
H5 Game AI Inspector 是 Chrome DevTools 面板：左侧为检视（场景树、属性、注入脚本等），右侧为可选 AI 助手。打开 H5 游戏后按 F12，切换到 H5 AI Inspector 标签即可使用。
面板总览
安装扩展并打开游戏页后，DevTools 中可见双栏布局：中间为场景树与属性，右侧为 AI 助手；游戏画面仍在页面中运行。
| 区域 | 说明 |
|---|---|
| 游戏页 | 正常运行的 H5 游戏；可开启游戏页报错角标 |
| 左侧检视 | 顶栏控制、场景树、属性面板、注入代码 / 骨骼 / 抓帧等 |
| 右侧 AI | 多模型对话；可附带检视上下文与最近报错（需自备 API Key） |
iframe 嵌套与切换调试目标
游戏嵌在 iframe（或多层 frame）中时，扩展同样可以检测引擎并检视，无需游戏必须在顶层页面。
| 能力 | 说明 |
|---|---|
| iframe 内游戏 | content script 全帧注入，可定位含引擎的 frame 并建立检视 |
| 切换调试目标 | 检测到多个 frame 时，顶栏出现 检视目标 下拉（如 frame 0 · CocosCreator · host） |
| 自由切换 | 在下拉中选择不同 frame，场景树 / 属性 / 注入等会针对当前选中的目标刷新 |
仅 0～1 个可用 frame 时，下拉通常隐藏。树一直为空时，可先确认顶栏是否选中了真正含游戏引擎的 frame。
场景树与属性
打开面板后，扩展会检测引擎（如 Cocos Creator）并构建场景树。点击树节点即可在右侧查看、修改属性。
选择节点的方式
- 树中点击：在左侧场景树展开层级，点击节点名称选中；节点旁勾选框可切换节点激活/可见（视引擎而定）。
- 游戏内点击拾取：勾选树上方的「点击高亮选中」后，在游戏画面点击对象即可选中对应节点。
- 划过高亮：勾选「高亮划过对象」，鼠标在游戏上移动时预览高亮。
- 阻止点击：勾选「阻止点击」后，游戏内点击不穿透到玩法层，便于专注拾取检视。
属性面板
- 展示选中节点的
position、scale、size、active等（随引擎变化）。 - 「显示方法」「显示私有变量」可切换可见字段。
- 修改属性后可用「查看修改」回顾本会话改动并复制相关代码。
- 底部搜索可按名称 / UID 过滤树节点。
属性右键
在属性行上右键：
| 选项 | 说明 |
|---|---|
| 复制属性名 | 复制字段名 |
| 复制属性值 | 复制当前值 |
| 跳转到定义 | 对函数类型属性，尝试在 Sources 打开定义处 |
节点右键菜单
在场景树节点上 右键，可快速复制信息、输出到控制台、跳转源码或导出骨骼。
| 选项 | 说明 |
|---|---|
| 复制名字 | 复制节点显示名（FairyGUI 等场景下可能为类名） |
| 复制 NAME | 复制节点 name 等引擎属性（部分引擎显示） |
| 复制 ID | 复制引擎侧节点 ID（有 ID 时显示） |
| 复制节点路径 | 复制从根到该节点的路径字符串 |
| 输出变量 | 在控制台输出该节点对象，便于继续调试 |
| 跳转到构造方法 | 尝试在 Sources 打开类的构造/定义 |
| 跳转到变量声明 | 尝试定位变量声明处 |
| 输出节点路径 | 将路径打印到控制台 |
| 导出骨骼资源 | 导出当前节点关联的 Spine / DragonBones 等（支持的引擎下显示） |
| 取消修改记录 | 清除该节点在本会话中的属性修改记录（有改动时显示） |
示例：右键节点 →「复制节点路径」→ 粘贴到脚本或发给 AI 做定位。
顶栏：引擎信息与游戏控制
顶栏显示检测到的引擎与版本，并提供运行控制。
| 控件 | 说明 |
|---|---|
| 引擎徽章 / 版本 | 如 CocosCreator v3.8.8 |
| 检视目标 / frame | 多 iframe 时显示下拉，用于切换调试目标；单项时可能仅显示摘要 |
| 显示 FPS | 在游戏页叠加 FPS |
| 暂停 | 冻结主循环（定时器 / rAF 缩放为 0） |
| 下一帧 | 暂停后单步推进一帧；未暂停时点击会先暂停再步进 |
| 刷新 | 刷新游戏页 |
右侧顶栏按钮还包括：抓帧&Shader、骨骼资源、注入代码、说明（见下文）。
骨骼资源（Spine / DragonBones）
点击顶栏 「骨骼资源」，可扫描当前页中的骨骼动画资源，预览动作并打包下载。节点右键 「导出骨骼资源」 也可导出当前节点相关骨骼。
| 能力 | 说明 |
|---|---|
| 刷新列表 | 重新扫描场景中的 Spine / DragonBones |
| 打包全部 ZIP / 下载 ZIP | 导出贴图与可用骨骼数据 |
| 定位节点 | 在场景树中定位该骨骼所在节点 |
| 动作预览 | 点击动作名在游戏内播放；可暂停 / 停止 |
支持情况因引擎与资源加载方式而异；缺原始骨骼数据时可能仅导出贴图与运行时摘要。
注入代码
点击顶栏 「注入代码」，在游戏 页面主世界 执行自定义 JavaScript（与引擎同上下文，可访问 cc / Laya / egret 等）。
| 能力 | 说明 |
|---|---|
| 多脚本 | 新建 / 保存 / 删除 / 下载 / 导入脚本 |
| 匹配规则 | 如「执行一次」、按站点或游戏帧 URL 等规则控制何时执行 |
| 执行 | 立即在游戏页运行当前脚本 |
| 运行日志 | 底部 Dock：区分「注入」与「页面」日志；可按 Log / Warn / Error 过滤 |
| AI 分析 | 对日志中的 Error 可一键交给右侧 AI（需配置 Key） |
注入脚本保存在本机；请勿注入不可信代码。可能导致崩溃的操作请自行评估风险。
抓帧 & Shader
点击顶栏 「抓帧&Shader」，可抓取渲染帧序列并查看对应着色器源码。
| 能力 | 说明 |
|---|---|
| 帧条带 | 浏览已抓取帧；上一帧 / 下一帧切换 |
| 重新抓取 | 再次采集帧序列 |
| 显示大图 | 放大当前帧 |
| Shader 视图 | 查看顶点 / 片元着色器；可复制、下载、重置 |
| 执行 Shader | 在支持的情况下试验修改后的 Shader |
| 是否同步切换 Shader | 切换帧时同步关联 Shader |
适合排查渲染异常、对比多帧画面与 Shader 差异。
游戏报错
扩展会捕获游戏页运行时错误。可在 AI 区报错入口或游戏页角标打开 「游戏报错」 列表。
| 操作 | 说明 |
|---|---|
| 悬停列表项 | 右侧预览完整消息与堆栈 |
| 点击蓝色文件路径 | 在 DevTools Sources 打开对应位置 |
| 点击列表项 /「AI 分析选中项」 | 将报错交给 AI 分析（需打开面板并配置 Key） |
| 游戏页报错提示 | 勾选后在游戏画面显示报错数量角标 |
| 一键清空 | 清空已捕获报错 |
未打开 H5 AI Inspector 面板时，报错仍可在游戏页展示列表；打开面板后才可做 AI 分析：
AI 助手
右侧 AI 助手 支持 OpenAI 兼容多厂商模型，用于结合检视上下文与报错做诊断（需自备 API Key）。
| 能力 | 说明 |
|---|---|
| 多模型 | 在配置中添加服务商与模型（如 GLM、DeepSeek、Gemini 等） |
| 附带上下文 | 发送时附带引擎、选中节点、属性摘要等 |
| 附带报错 | 附带最近游戏报错列表 |
| 执行模式 | 对 AI 给出的代码块：确认执行 / 自动执行 / 禁用（见配置） |
| 对话记录 | 按游戏本地保存，可在历史中找回 |
配置入口：AI 面板右上角 「配置」 → 添加模型与 API Key。密钥仅存本机 chrome.storage.local（明文），详见 AI Key 配置。
