Appearance
快速入门
本页说明如何安装 H5 Game AI Inspector，并完成第一次检视。安装后打开 H5 游戏，按 F12，在 DevTools 中切换到 H5 AI Inspector 即可。
安装前准备
- 浏览器：Google Chrome（推荐）或其它基于 Chromium、支持扩展的浏览器
- 一台可访问的 H5 游戏页（支持的引擎见 支持的引擎）
- 本地加载时：需能解压 ZIP，并开启 Chrome「开发者模式」
方式一：Chrome 网上应用店（推荐）
适合日常使用，可随商店自动更新。
1. 打开商品页
- 直达：H5 Game AI Inspector - Chrome Web Store
- 或在 Chrome 网上应用店搜索「H5 Game AI Inspector」
2. 添加至 Chrome
点击蓝色 「添加至 Chrome」，在弹窗中确认权限，等待安装完成。
3. 确认已启用
- 打开
chrome://extensions/ - 找到 H5 Game AI Inspector，确认开关为开启状态
方式二：官网 ZIP 本地加载
适合跟进官网最新包，或暂时无法使用商店时。
1. 下载压缩包
2. 解压
解压到任意本地目录。解压后的 根目录 应能直接看到 manifest.json，以及 js/、css/、icons/ 等文件夹（不要多套一层空目录）。
选对文件夹
在 Chrome 里「加载已解压的扩展程序」时，请选中 含有 manifest.json 的那一层。若只看到一个外层空文件夹，再进入内层再选。
3. 加载到 Chrome
- 打开
chrome://extensions/ - 右上角打开 开发者模式
- 点击 「加载已解压的扩展程序」
- 选择上一步解压后的根目录（含
manifest.json） - 列表中出现 H5 Game AI Inspector 且已启用即可
首次使用
1. 打开 H5 游戏
在浏览器中打开任意支持的 H5 游戏页面（支持 iframe 嵌套，游戏不必在顶层文档）。引擎列表见 支持的引擎。若页面有多个 frame，可在顶栏 检视目标 下拉中切换调试对象。
2. 打开开发者工具
按 F12（或右键页面 →「检查」）。
3. 切换到 H5 AI Inspector
在 DevTools 顶部标签栏中找到 「H5 AI Inspector」 并点击。标签较多时可向右滚动，或点 » 更多菜单。
左侧为场景树与属性，右侧为可选 AI 助手。顶栏显示检测到的引擎（如 Cocos Creator）后，即可开始检视。
验证是否成功
推荐用公开 Demo 快速验证：
- 打开 Cocos Creator 测试页（或其它支持引擎的 Demo）
- 按 F12 → 打开 H5 AI Inspector
- 等待场景树出现节点
- 勾选「点击高亮选中」，在游戏画面点击对象；或直接在树中点击节点
- 右侧属性面板应显示该节点信息
若树一直为空，请先 刷新游戏页 再开面板；仍不行见下方「常见问题」与 FAQ。
使用小贴士
| 操作 | 说明 |
|---|---|
| 点击拾取 | 勾选树上方「点击高亮选中」后再点游戏画面 |
| 阻止玩法点击 | 勾选「阻止点击」，便于只做检视拾取 |
| iframe / 多 frame | 顶栏「检视目标」下拉可切换调试 frame |
| 暂停 / 下一帧 | 顶栏可冻结主循环并单步推进 |
| AI 助手 | 右侧配置自备 API Key 后即可对话；见 AI Key 配置 |
| 重载扩展 | 先关 F12，再在扩展页重载，然后刷新游戏页，最后再开 DevTools |
功能详解与截图见 核心功能。
常见问题（速查）
| 现象 | 处理 |
|---|---|
| 找不到 H5 AI Inspector 标签 | 确认扩展已启用；标签栏向右滚动；关 F12 → 重载扩展 → 刷新游戏 → 再开 F12 |
| 场景树为空 / 未检测到引擎 | 确认引擎已支持；刷新游戏页；iframe 时稍等或切换顶栏「检视目标」frame |
控制台 engine.js / inspector.js 404 | 本地加载目录错误：应选含 manifest.json 的包根目录或 dist/ |
Extension context invalidated | 先关闭整个 DevTools，再重载扩展，刷新游戏后重新打开 F12 |
| 点不到游戏对象 | 勾选「点击高亮选中」；需要时再勾「阻止点击」 |
更多说明：常见问题。
下一步
商店页：H5 Game AI Inspector · 反馈：bbs.egret.uk