https://github.com/wezzzyang/Cocos-Node-Inspector
使用方法
- 下载后，在 chrome://extensions 加载本插件。
基础
- 在 Chrome 加载本扩展后，打开 Cocos Creator 2.x Web 预览（localhost / 127.0.0.1 任意端口），按 F12 打开「Cocos Node」面板。
- 兼容 Creator 2.0～2.4；状态栏会显示引擎版本号（若可读取）。
- 状态栏显示连接状态与当前场景名；点「刷新」可强制拉取节点树。
- 「轮询」开启后会周期性同步节点树与选中节点属性；可调整间隔（毫秒）。
节点树
- 点击节点可选中，并在右侧查看/编辑属性。
- 点击左侧三角可展开/折叠该节点的直接子级。
- 名称后绿色 L 表示挂有 cc.Label；蓝色 S 表示挂有 cc.Sprite；「组件:N」为组件数量。
- inactive（半透明）表示节点 active 为 false。
搜索过滤
- 直接输入文字：按节点名称模糊过滤。
- 输入 tt:组件名：按组件类型过滤，例如 tt:Label、tt:cc.Sprite、tt:Layout。
- 快捷：tt:l / tt:label 找 Label；tt:s / tt:sprite 找 Sprite。
- 匹配到的节点会保留其祖先路径，便于定位。
拖拽改层级
- 拖到目标行偏左（同级区）：按落点上半/下半插入为该节点的前/后兄弟。
- 拖到目标行偏右：成为该节点的子节点（插到末尾）。
- 蓝色横线表示同级前/后；绿色高亮表示成为子节点。
- 不能拖动场景根节点；不能把节点拖到自己的子孙下。
Alt + 点击
- Alt + 点击某个节点（或点其三角）：只对该节点及其子孙做「全部展开 / 全部折叠」。
- 若子树中仍有展开的分叉 → 全部折叠；若已全部折叠 → 全部展开。
- 不影响树上其他无关分支的展开状态。
悬停高亮
- 鼠标在节点树上滑过某节点时，游戏画面中对应节点显示绿色粗边框。
- 移开鼠标后边框消失。
属性检查
- 可编辑节点：name、active、position、size、anchor、scale、angle、opacity、zIndex、color 等。
- 颜色使用取色器，并单独编辑 Alpha（0–255）。
- 组件区可编辑 number / boolean / string 类型属性；勾选 enabled 可开关组件。
- cc.Sprite 的 spriteFrame 可粘贴资源 UUID 换图（2.4 用 assetManager，更早 2.x 自动用 cc.loader / AssetLibrary；不是只改 _uuid）。
- Scene 根节点没有 active，界面不会显示该项。
画面拾取（类似审查元素）
- 工具栏最左侧「拾取」，或快捷键 Alt+Shift+P（面板与游戏页均可）切换。
- 开启后光标移到游戏画布上，会高亮鼠标下的节点。
- 只拾取带渲染组件的节点：cc.Label / cc.Sprite / cc.RichText / Spine / Graphics 等；纯 Widget、Layout 或空节点不会被拾取。
- 坐标换算与引擎鼠标事件一致，保证与画面位置对应。
- 同一位置有多个渲染节点时，用鼠标滚轮按深度切换（更深的优先）。
- 左下角浮层显示当前候选 序号/总数 与节点名。
- 点击确认选中：节点树会展开并选中该节点，随后自动退出拾取模式。
- 再次点「拾取」、按 Alt+Shift+P，或关闭面板可退出。
记忆选中
- 选中节点后会按场景记住位置（uuid + 名称路径）。
- 再次进入同一场景时，会自动展开路径并选中上次的节点。
界面
- 「深色 / 浅色」：切换主题，设置会保存；配色已提高标签与未激活节点对比度，减轻刺眼感。
- 右侧「字号」滑条：缩放字体大小；「字重」滑条：400～800 调节粗细（尺寸固定，会记住）。
- 未激活节点：仅字体改为琥珀色斜体（不改背景）；选中为蓝底+蓝字；悬停为浅底。
- 本「说明」按钮：随时查看全部功能说明。
使用提示
- 修改扩展代码后：在 chrome://extensions 点重新加载，然后刷新预览页并重开 DevTools。
- 若出现「扩展已重载 / Extension context invalidated」：刷新预览页并重开本面板即可。
- 预览地址：localhost / 127.0.0.1 任意端口；游戏在 iframe 里也能识别（all_frames）。
- 支持范围：Cocos Creator 2.0～2.4.x。
