技术派 | 推荐一款可查看节点树的插件 CC_inspector +
本文转载自公众号「奎特尔星球」，已获得编辑权限。
Cocos Store 为独立开发人员或小规模游戏厂商提供了许多低价甚至是免费的高品质插件，助力开发者进行资源处理、平台发布、开发辅助、实用工具、引擎增强等，从而大大减少开发时间。Cocos Store 目前拥有数十款丰富的插件资源，如 Camera 官方范例、物理引擎官方范例源码、i18n多语言插件、汉语转拼音、生成编译库等。
今天「技术派」栏目要带来分享的是江湖人称「插件小王子」的许彦峰。彦峰开发的 CC_inspector 升级款插件，可以让开发者直接在 Cocos Creator 中运行游戏、查看节点属性、查看节点树...……
CC_inspector+
从 CC _inspector 第一个版本到今天 CC_inspector+ 的发布，经历了将近一年的时间。这一年里，Creator 同样也在飞速发展。论坛中有不少开发者有类似 unity 那样运行时需要查看节点树的需求，这个插件的发布，对开发者无疑是一个福利，算是感谢大家送我「插件小王子」这个称号吧！
编辑器菜单位置：list => CC_inspector => 打开
插件的核心功能，简单来说一句话：查看游戏运行时节点树结构。
围绕着核心功能，插件提供了预览游戏窗口、节点树列表窗口、节点信息窗口。安装插件后第一件要做的事情，就是像上图一样，拖拽好自己喜欢的布局，下面来具体介绍各个窗口的功能：
游戏预览窗口
这个窗口是实时预览游戏的，核心技术不瞒大家，其实就是嵌套了一个 webview，加载 http://localhost:7456 ，所以，这就强大了，基本上是和 Cdhrome 等浏览器环境里面运行的游戏一模一样。当然你也可以在这个窗口调试游戏，唯一不同的是，需要点击下方的红色按钮打开 DevTools，打开开发者工具，然后具体的 debug 操作，就真的和 Chrome一模一样了。
如果想要更好玩一点，这个窗口你可以停靠在 Creator 主界面中，有点类似 Unity 的 Game 窗口，所有的开发流程，除了写代码，剩下的基本可以在 Creator 里面搞定。
节点列表窗口
这个窗口算是插件的主窗口，主要用来显示节点树，一个很赞的设计就是最右上边的小灯泡，这个小灯泡相当于一个指示灯，指示插件是否能够正常工作。
当打开插件后，小灯泡是灰色的，代表插件目前没有检测到运行的游戏，此时是无法正常使用插件的相关功能，你可以点击红色按钮打开 Web 预览，选择使用插件默认的预览功能。
当游戏运行启动的时候，小灯泡会立马变为闪烁的红灯，最后变为绿灯，表示插件已经可以正常使用了。接下来点击刷新节点树就会列出游戏当前状态的节点树状态，点击具体游戏节点即可在节点信息中查看到该节点的详细信息。哈哈，没错，节点信息布局，完全模仿 Creator，有木有很亲切的感觉。
目前节点列表必须是手动刷新，在后续迭代版本中，自动刷新功能肯定是要加入进去的，真正的做到游戏节点树显示实时同步。
节点信息窗口
这个窗口想必不用多做解释了吧，罗列节点的具体信息，美中不足的是，目前只支持显示 node 属性，对于组件信息，可能要稍微迭代几个版本才能加入。
帮助
更多帮助内容，请打开 list => CC_inspector => 帮助，获得更多的支持。
QA 环节
1、小灯泡一直灰色怎么办？
小灯泡灰色的意思就是没有发现正在运行的游戏，此时需要运行新游戏即可
2、更多功能
局域网联机查看节点树，没错，即使你游戏运行在手机上，同样可以查看节点树情况
3、推荐操作
以下几种搭配方式：
边修边改边预览
Chrome 党专用
同理 Creator 模拟器也适用。实际测试发现，还有问题留存，接下来会进一步解决，敬请期待！
划重点
我们邀请 panda 对 CC_inspector+ 插件做个测评时，一向淡定的 panda 不淡定了......
只需 2 元，就能搭上老司机的专车，愣着干嘛，下载啊！
技术派，是 Cocos 全新推出的专栏，我们将不定期邀请知名的游戏制作者，为广大开发者分享来自真实项目的实用的开发技术和实战经验。欢迎大家推荐想要学习的游戏产品和想要了解的技术知识，也诚邀有技术分享意愿的开发者联系我们噢~