为 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,这也是开源此插件的一个重要原因。
下载插件,戳戳戳!