Skip to content

快速入门 ​

本页说明如何安装 H5 Game AI Inspector(也可作为 Cocos Inspector、Egret Inspector、Laya Inspector),并完成第一次检视。安装后打开 H5 游戏,按 F12,在 DevTools 中切换到 H5 AI Inspector 即可。

安装前准备 ​

  • 浏览器:Google Chrome(推荐)或其它基于 Chromium、支持扩展的浏览器
  • 一台可访问的 H5 游戏页(支持的引擎见 支持的引擎)
  • 本地加载时:需能解压 ZIP,并开启 Chrome「开发者模式」

方式一:Chrome 网上应用店(推荐) ​

适合日常使用,可随商店自动更新。

1. 打开商品页 ​

2. 添加至 Chrome ​

点击蓝色 「添加至 Chrome」,在弹窗中确认权限,等待安装完成。

添加至 Chrome

3. 确认已启用 ​

  • 打开 chrome://extensions/
  • 找到 H5 Game AI Inspector,确认开关为开启状态

扩展管理页确认已启用


方式二:官网 ZIP 本地加载 ​

适合跟进官网最新包,或暂时无法使用商店时。

1. 下载压缩包 ​

下载官网安装包(ZIP)

需要回退旧版时,见 版本更新 · 历史版本下载(仅官网直下包,不含商店包)。

2. 解压 ​

解压到任意本地目录。解压后的 根目录 应能直接看到 manifest.json,以及 js/、css/、icons/ 等文件夹(不要多套一层空目录)。

解压后的扩展根目录示例

选对文件夹

在 Chrome 里「加载已解压的扩展程序」时,请选中 含有 manifest.json 的那一层。若只看到一个外层空文件夹,再进入内层再选。

3. 加载到 Chrome ​

  1. 打开 chrome://extensions/
  2. 右上角打开 开发者模式
  3. 点击 「加载已解压的扩展程序」

加载已解压的扩展程序

  1. 选择上一步解压后的根目录(含 manifest.json)
  2. 列表中出现 H5 Game AI Inspector 且已启用即可

首次使用 ​

1. 打开 H5 游戏 ​

在浏览器中打开任意支持的 H5 游戏页面(支持 iframe 嵌套,游戏不必在顶层文档)。引擎列表见 支持的引擎。若页面有多个 frame,可在顶栏 检视目标 下拉中切换调试对象。

2. 打开开发者工具 ​

按 F12(或右键页面 →「检查」)。

3. 切换到 H5 AI Inspector ​

在 DevTools 顶部标签栏中找到 「H5 AI Inspector」 并点击。标签较多时可向右滚动,或点 » 更多菜单。

DevTools 中选择 H5 AI Inspector

左侧为场景树与属性,右侧为可选 AI 助手。顶栏显示检测到的引擎(如 Cocos Creator)后,即可开始检视。


验证是否成功 ​

推荐用公开 Demo 快速验证:

  1. 打开 Cocos Creator 测试页(或其它支持引擎的 Demo)
  2. 按 F12 → 打开 H5 AI Inspector
  3. 等待场景树出现节点
  4. 勾选「点击高亮选中」,在游戏画面点击对象;或直接在树中点击节点
  5. 右侧属性面板应显示该节点信息

若树一直为空,请先 刷新游戏页 再开面板;仍不行见下方「常见问题」与 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
点不到游戏对象勾选「点击高亮选中」;需要时再勾「阻止点击」

更多说明:常见问题。


下一步 ​

  1. 核心功能详解 — 场景树、iframe 切换、右键、注入、骨骼、抓帧、报错与 AI
  2. AI Key 配置 — 添加模型与密钥
  3. 支持的引擎 — 引擎范围与测试链接
  4. 常见问题 — 安装与调试排错

商店页:H5 Game AI Inspector · 反馈:bbs.egret.uk

H5 Game AI Inspector