cc-inspector技术实现剖析

这篇文章其实早就应该写了，一直懒得开头，就这样拖到了今天，废话不多说，直接进入正题。
距离cc-inspector发布，有近一年的时间了，而这一年里面，仅仅迭代了2个版本，然后，就没有然后了...说句实在话，虽然cc-inspector出自本人，其实鄙人很少使用的，为什么，因为多年cocos带给我的习惯，一般程序出现问题，80%情况下，通过表现推理代码，简单调试，基本都能解决，对于这种可视化的调试，emmmm，老司机感觉这是对新人的一个福利吧。
相信使用过该插件的朋友们都应该了解，就是这个插件是安装在你所使用的浏览器中，对，不是creator中，而且必须是Chrome内核的浏览器，你成功装在IE请call我，我今晚找你去。既然必须安装在chrome中，那么这个插件（严格来说，应该叫做Chrome扩展程序）就必须遵守Chrome插件开发的规则，so，阅读Chrome扩展程序开发文档必不可少！
官方的文档因为是全英，so，本人最终还是找了份360翻译的中文文档：http://open.chrome.360.cn/extension_dev/overview.html ，我知道，有点low，但是，真的还算比较实用，emm，简单来说，cc-inspector最核心的技术点就是在这里。
了解完了Chrome这边，下边来说说creator这边，首先我们需要跟运行的游戏进行通讯，这样，我们才能拿到我们想要的数据，相信不少朋友在打开浏览器开发者模式，debug的时候回经常在console里面输入一个debug的变量，或者输入一段js代码，emmm，cc-inspector受到这个操作的启发，刚好chrome插件也提供了注入页面代码的接口，so，功能就这样链接了起来，当cc-inspector启动的时候，会向运行的creator游戏中注入一段事先编写好的代码，这部分代码大部分做的工作是在收集游戏运行时数据，然后反馈给插件，最后插件可视化显示出来，不擅长web开发的朋友，可以选择vue，所以，整个插件，其实就是一个个知识点的衔接：

• chrome 插件开发
• vue+webpack
• element-ui（当然也可以选择其他UI框架）
• cocos creator

感觉写的还是有点仓促，就这样吧，这算是一个开头！目前有想更新第三版，在下个版本中，我更希望cc-inspector能存在creator中，可惜，这样是要付出一些代价的，至于什么代价，各位看官，不留言捧个场么？

B30835D696F50673A2747EE93EF6924C.jpg