cc-profiler — 可注册式 Cocos Creator 性能监控面板

业务运行时 register() 自己的显存、节点数、网络状态、什么指标都行,自动挂面板。一行 import 联动预览页 Show FPS 按钮,零接入。Apache 2.0。

仓库:https://github.com/HappyLifeOk/cc-profiler

为什么

Cocos Creator 自带的 fps 面板按预览 Show FPS 就出来,引擎 11 项。但实际开发想看的常常是业务侧的:

  • 某模块此刻占多少显存?
  • UI scope / 节点数有没有泄漏?
  • WebSocket 在连还是断了?

这些只能 console.log 看,或自己拼一个面板挂右上角。

cc-profiler 把 “挂面板 + 显示业务指标” 这件事抽到库里——你只要 register() 喂数据,剩下面板渲染 / 勾选 / 持久化全自动。

怎么用

1. 接入

cc-profiler/ 整个目录放进项目 extensions/ 下(或 git submodule)。package.json 已配 asset-db.mount,会把 lib/ 挂成 db://cc-profiler 独立库——业务代码直接 import,无需进 assets/

2. 加业务指标

业务文件里 import 任意 cc-profiler 符号,cocos 适配层顶层副作用自动触发——预览页 toolbar 的 Show FPS 按钮即与面板联动,无需任何启动代码。

import { profiler } from 'db://cc-profiler/core/registry';
import { showProfiler } from 'db://cc-profiler/cocos/cocos-profiler';  // 仅 import 即触发 toolbar 联动

// 结构化指标(自动平均、标红、格式化)
profiler.register({
    id: 'jsHeap', label: 'JS堆(M)',
    get: () => (performance as any).memory.usedJSHeapSize / (1024 * 1024),
    format: v => v.toFixed(0),
    warn: v => v > 200,        // > 200M 标红
    average: 500,              // 500ms 平均窗口
});

// 文本段(复杂展示逃生舱)
profiler.rawSection('net', () => `网络: ${socket.connected ? '已连接' : '断开'}`);

// 可选:手动 show(不调也行,点 toolbar 即可)
// showProfiler();

注册即自动纳入面板渲染 + 勾选列表 + 持久化。

兼容性

Cocos Creator >= 3.8.0。已在 3.8.5 / 3.8.7 / 3.8.8 上验证。

欢迎拍砖 / 提需求 / 提 PR:https://github.com/HappyLifeOk/cc-profiler


更新日志

2026-06-29

  • 新增 setProfilerEnabled 全局静态开关——嵌入态宿主(iframe / 截图工具 / 演示模式)URL 带 ?profiler=off 一键关,无需跟 toolbar 自启抢时序
  • 优化 业务文本超宽走 Label.Overflow.SHRINK 按比例缩字号容下,面板宽度恒定不抖(如 [当前页] LongUIName 12.3M独占 不再撑出去)

2026-06-27

  • 重构 文本切 Label + cacheMode = CHAR 池化,多行共享字符 atlas batch 成单 drawcall,面板自身渲染开销稳定可预期
  • 重构 面板自建 Canvas + Camera + Layers.Enum.PROFILER 层 + addPersistRootNode 跨场景持久挂载
  • 优化 toolbar 联动延迟到 AFTER_UPDATE 避免首次 view 未就绪导致面板尺寸错
  • 文档 开源前整理 README / metadata / SPDX / .gitignore

2026-06-25

  • 新增 register 支持 defaultEnabled 默认开关态 + _touched 持久化(区分"默认值生效" vs “用户已选择”,新版默认改了不覆盖用户选项)
  • 新增 bindPreviewToolbarToggle 联动预览页 toolbar 的 Show FPS 按钮,零接入
  • 修复 面板覆写 UITransform.hitTest 强制返回 false,避免 RichText 拦截下层按钮点击

2026-06-17

  • 优化 面板不滚动 / 按内容动态尺寸 / 不换行,避免 ScrollView 拦截下层点击

2026-06-07

  • 重构 lib/ 隔离 + 扩展 package.json asset-db.mount,挂成 db://cc-profiler 独立库,业务无需放进 assets/
  • 文档 README 改名 cc-profiler + 接入说明,补 LICENSE,mount 标记 readonly

2026-06-06

  • 初始 第一版可用

Roadmap

  • 卡顿帧定格:单帧超阈值时快照各阶段耗时 + 环形缓冲,抓偶发尖刺(平均窗口会抹平的那种)
  • 可替换 renderer:渲染层抽接口支持非 Cocos 环境(core 已经引擎无关,差一层 renderer 解耦)
2赞

图呢?我想看看什么样的.

ai好啊,再用力点蹬,可视化也搞出来 :love_you_gesture:

image
就这个嘛,官方不是有吗,和官方的都重叠了,感觉没啥用,多此一举。不过开源分享,还是顶楼主。

大佬nb,顶一个

3.8.3版本,cocos编辑器有报错,跑不起来。 :joy:

你确定官方的可以定制么 做这个是为了订制显示哦,可以注入你想要监听的东西

可以看看错误吗

使用这个之后需要关闭原版

QQ20260629-174822
QQ20260629-174640

:rofl:那就是低版本没有这个APi 我改一下

大师 补充好了