运行时查看节点树，一款专为 Creator 定制的 Chrome 插件

为 Cocos Store 操碎了心的插件小王子许彦峰同学又出新插件啦！截止当前，他共向扩展商店提交了腾讯 Bugly 插件小助手、位图字体生成工具、热更新 manifest 插件、front 瘦身字体、4399 原创平台 SDK 等近十款插件。C姐谨代表 Cocos 官方授予他 「Cocos 年度插件之王」的称号！（此处应有掌声和鲜花）

最近他又向 Cocos Store 提交了一款 CC_Inspector 插件，设计该插件的初衷是专为 在 Chrome 环境下运行调试的 Cocos Creator 开发者提供方便。插件 Logo 标志则是希望这只 '猫头鹰' 能作为游戏开发之旅的火眼金睛，为开发者凿山开路。

插件安装

重要说明

安装 cc_inspector 插件前请您先查看下自己 Chrome 浏览器的版本，在帮助 —> 关于中查看版本:

• 如您的浏览器版本大于或等于 63.x.x.x 请使用开发者安装模式

• 如小于 63.x.x.x 您可以使用普通安装模式。

开发者安装模式(推荐)

1、打开 Chrome，转到 Chrome 扩展工具页 (可以直接输入 chrome://extensions/  打开)

2、先把开发者模式打开。 

3、解压后你会发现 *.crx 文件,这个是 Chrome 的插件安装文件,需要将 *.crx 修改为*.zip，然后再次解压

4、点击加载已解压的扩展程序，点击弹出浏览文件夹，选择刚刚解压出来的文件夹

5、点击确定安装，安装完成的状态：  

6、如果没有安装成功,或者遇到任何安装困难,我感觉你需要阅读一下这篇文档: Chrome 怎么安装非官方插件 https://www.jianshu.com/p/438e15fec81b

普通安装模式

1、注意您的 Chrome 浏览器一定要小于 63.x.x.x 版本才可以使用

2、把下载的 crx 文件直接拖动到 Chrome 的扩展工具窗口中 

3、点击确定安装

4、安装完成的状态： 

如果是这样，那是因为 Chrome 版本过高导致。为了防止扩展程式被病毒木马或恶意软件修改，Chrome 的扩展程序安全验证机制， 会比对本地扩展和 Chrome 商店中的扩展是否一致，如不匹配就会出现这个错误。 

5、碰到上述情况,请使用 开发者安装模式 ,如果对插件的安全性存在疑问,请自行阅读源码,修改打包即可!

为保证工具可用，请重新启动浏览器

使用说明

1、在 Chrome 中打开 creator 开发的游戏

2、F12 打开开发者工具你会发现多了一个 Cocos 选项 

3、点击刷新按钮即可查看游戏运行时的节点目录树，左侧为节点，右侧为节点信息

4、节点信息中有控制显示隐藏的按钮，点击该按钮将直接影响运行中的游戏效果 

5、节点属性列表中显示了改节点上挂的所有组件，目前仅仅支持查看组件名称,并不能实时编辑

开发中使用的技术

• Chrome 插件开发

• vue+webpack

• element-ui

• Cocos Creator

寻求协助

这个插件由于使用了比较多的 web 前端技术，急需寻找一个懂 web 前端的小伙伴，共同完善这个插件。有意者可以加 QQ 群 224756137，这也是开源此插件的一个重要原因。

下载插件，戳戳戳！