Cocos Creator 网页预览调试工具 — 实时查看节点树、修改属性、性能分析。
- 实时节点树浏览
- 节点属性同步编辑
- 输出节点/组件引用到控制台
- UI 节点位置标记
- 独立调试信息面板（FPS 等）
- Profiler 性能分析
在 Cocos Creator 项目根目录下运行：
# 推荐: 通过 npx/bunx 始终使用最新版本
npx cccdev@latest init
# 或
bunx cccdev@latest init如需覆盖已有的 preview-template/：
npx cccdev@latest init --forceCLI 会自动检测 Cocos Creator 版本，将 devtools 模板安装到 preview-template/ 目录。刷新浏览器预览即可使用。
$ npx cccdev@latest init
检测到 Cocos Creator 3.x 项目
✓ 模板安装成功!
preview-template/
index.ejs
devtools/
assets/
index.js
style.css
刷新浏览器预览即可使用 devtools。
Usage: cccdev <command> [options]
Commands:
init 安装 devtools 预览模板到 Cocos Creator 项目
Options:
--help, -h 显示帮助
--version 显示版本号
--force 覆盖已存在的 preview-template
- Bun >= 1.0
ccc-devtools/
├── bin/cccdev.ts # CLI 入口
├── src/
│ ├── cli.ts # 命令路由
│ ├── commands/init.ts # cccdev init 实现
│ └── utils/ # detect, logger
├── template/ # 构建产物 (gitignored, 发布时打入包)
│ └── 3x/
├── packages/
│ └── cccdev-template-3x/ # CC 3.x 模板源码 (private, 不发布)
│ ├── src/ # Preact 源码
│ ├── template/ # vite 构建输出
│ └── vite.config.ts # IIFE 构建配置
cd packages/cccdev-template-3x && bun install| 命令 | 说明 |
|---|---|
bun run build |
构建模板并复制到 template/3x/ |
bun run type-check |
TypeScript 类型检查（根目录 CLI 代码） |
bun run lint |
oxlint 代码检查 |
bun run lint:fix |
oxlint 自动修复 |
bun run fmt |
oxfmt 格式化代码 |
bun run fmt:check |
oxfmt 检查格式（不写入） |
在 Cocos Creator 项目中使用本地开发版本：
cd /path/to/cocos-project
bun run /path/to/ccc-devtools/bin/cccdev.ts initbun run build
npm publish- 视图层: Preact + Signals (~3KB runtime)
- 构建: Vite (IIFE library mode)
- CLI: Bun 原生 TS 执行，零运行时依赖
- 自定义网页预览文档: https://docs.cocos.com/creator/manual/zh/editor/preview/browser.html
- Cocos Creator 插件商店: https://store.cocos.com/app/detail/3922 （功能完全一样，仅供支持本人开发）
MIT