Cocos Inspector

Cocos Inspector Cocos Creator Web 游戏的运行时调试助手 打开游戏，打开 DevTools，即可直观看到场景层级、节点属性与实时性能数据。 无需修改工程，无需重新构建。 所有调整仅作用于当前浏览器标签页中的运行时游戏，不会写回工程或资源文件。 ———— 场景，一眼看清 ———— 在 DevTools 的“Cocos Inspector”页签中查看当前场景的实时节点树。 节点新增、删除、移动、排序、重命名和启用状态会自动同步；层级展开位置会按网页地址保存，刷新页面后仍可继续查看。 选中节点后，可直接检查和调整位置、旋转、缩放、世界坐标、尺寸、锚点与透明度。 还可在游戏画面中显示选中节点的包围盒，快速确认它实际显示在哪里、占多大范围。 ———— UI 与组件，直接调试 ———— 以接近 Cocos Creator Inspector 的方式查看和编辑常用组件属性，包括 Button、Widget、Sprite、Label、Mask、UIOpacity 与 Spine。 可快速排查布局对齐、边距、文本、颜色、透明度、填充效果、按钮状态和事件配置等常见问题。 自定义脚本组件支持数值、文本、布尔、枚举、向量、颜色、数组和嵌套对象。节点与组件引用可从层级树直接拖入，已有引用也可快速定位或清除。 选择场景根节点后，还可检查和调整环境光、天空盒、雾效、阴影、八叉树场景剔除与后处理等运行时场景设置。 ———— 性能，悬浮查看 ———— 点击浏览器工具栏中的 Cocos Inspector 图标，即可在游戏画面中打开性能面板，实时查看 FPS、Frame Time、Draw Call、Instance Count、Triangle Count、帧阶段耗时和 GFX 显存占用。 性能面板可自由拖动、等比例缩放、锁定和鼠标穿透，也可仅保留自己关心的指标。位置、尺寸和指标选择会按网站分别保存；右键面板可重置布局或复制诊断信息。 ———— 为这些问题而生 ———— 界面位置不对？快速检查节点层级、Widget 对齐与尺寸。 文字、图片或透明度异常？直接查看 Label、Sprite 和 UIOpacity 的运行时状态。 按钮没有反应？检查目标节点、事件配置与组件引用。 游戏卡顿？同时观察帧率、Draw Call、渲染阶段和显存数据。 ———— 开始使用 ———— 安装扩展后，打开正在运行的 Cocos Creator Web 游戏。 打开 Chrome DevTools，选择“Cocos Inspector”页签。 在层级树中选择任意节点，即可开始查看和编辑可用的运行时属性。 适用于浏览器中运行的 Cocos Creator Web 游戏。游戏完成初始化后即可读取场景；若发布构建移除了部分编辑器元数据，扩展会以当前运行时可获得的信息为准。