🌳开源一套运行时节点树插件，支持远程使用，桌面端独立使用，仓库已发

刚刚到能使用的阶段，代码还没有整理，有些乱，就先不发git仓库了，等全部完善之后再发仓库的GitHub链接。
当前实现了基本的有

运行时节点树功能：

拖拽可以调整节点层级及修改父节点

节点基本属性及组件（包括系统组件）属性面板的显示及属性修改
支持大部分Creator的ValueType结构的编辑，以及常用类型 string,number和枚举的修改，包括枚举选择器（类似于编辑器中的selector），UIRender中Color的动态修改

节点的筛选功能

尝鲜的demo的项目导入到编辑器中，运行platform场景，然后通过面板中的creator-viewer打开面板

在运行场景内点击连接按钮，插件面板中能正常显示节点数据即可

demo中的版本，在 3.8.3和 3.8.7中已经测试可运行，并且测试过Android客户端局域网内可以正常查看节点信息，但还不是特别稳定，因为周五了，想好好休息下，就早点发上来，先看看反馈，如果有使用问题或者bug可以提供给我，完善之后上架插件商城，免费提供使用，并且会维护一点时间。

插件使用Vue3+ElementPlus开发，WebSocket连接，理论上可以简单修改直接在网页中运行，但是我个人是做原生App游戏的，所以为了方便自己用，就只做了远程连接的版本，后面会在游戏客户端内增加一个基础的使用面板，然后增加LogHook来实现插件中可以直接查看游戏内打印的日志和远程执行一些简单的JS代码功能，方便调试，具体看使用反馈。

如有需要在自己的项目中测试的，可以将assets中CreatorViewer.ts脚本放到自己的工程下，然后在适当的地方调用 globalInfo.bridge.connect();(如果是局域网运行，需要记得修改为启动了监听插件的ip，端口默认33000)

没有什么技术含量，多是体力活，如果有问题还请反馈，轻喷

Vue+ElementPlus渲染节点树UI仓库 要在实际使用的场景下引用此子模块（独立出来的渲染节点树的仓库，理论上支持Vue的场景下都可以使用，比如Electron，Web，浏览器插件，只需要实现对应的传输通道即可显示节点树信息，通道为一个抽象的概念，当前已经实现两种通道编辑器插件的WebSockerServer和Electron）
https://github.com/bunnya33/creator_viewer_renderer.git

Electron仓库地址 桌面端，可以脱离编辑器运行（ViewerRender作为git子模块引用）
https://github.com/bunnya33/creator_viewer_electron.git

使用方法：
git clone https://github.com/bunnya33/creator_viewer_electron.git
git submodule update --init --recursive
npm install
开发模式下可以运行 npm run dev
或者选择自己打包exe npm run dist
运行如下图，做Electron版本的想法主要是在调试Web端或者PC模拟器可以方便置顶，并且可以脱离编辑器独立运行，缺点也就是Electron的独立包会很大现在200MB起

一个3.8.7版本的示例demo包括编辑器内的插件 （ViewerRender作为git子模块引用）
https://github.com/bunnya33/creator_viewer_demo.git

暂时先放这3个仓库，后续会做一个Chrome的插件版本，用法也会类似于Electron版本

最近的版本将节点树的渲染部分独立出来，解耦了通道和UI部分，理论上可以通过不同方式将信息传递到Viewer中，都可以显示节点树信息，比如Chrome插件，可以直接在web上下文中获取节点数据，然后通过chrome api 将message 发送给插件，而并不一定非要使用WebSocket作为传输数据的通道，以便于支持各个运行平台

支持了脚本中引用的节点、组件以及Asset的信息显示，并且支持引用的节点跳转和高亮提示，代码还在整理阶段，部分逻辑有些混乱注释不完整，后续会在增加功能的同时将代码整理好，并在必要处增加注释

个人觉得自己这个插件的优点是非定时刷新，只有在选择的节点和组件属性变化时才会同步到节点树UI，不会存在太大的性能消耗，并且数据变动时刷新即时，也避免了定时刷新通过getter获取数值时getter存在某些方法被注入调用产生一些不可预知的问题。

还有一点就是插件只支持被@property装饰的属性才会显示到组件面板中，这样做是为了可以在开发时确定要显示哪些属性，避免显示全部属性查找混乱。

当前的版本还未能开箱即用，也可能存在一些bug，后续会在整体功能稳定后考虑提交插件，增加客户端使用面板（方便前端运行时自己指定连接ip和端口，防止统一局域网下多人使用冲突的问题）

大牛，正好需要，收下我的崇拜。
留个支付宝二维码吧，我给你扫个咖啡钱

大佬有需要的话早说啊，我可以给你激活码，用不着亲自动手重新造轮子的

这是第几个运行时节点树了，太多了，数不来

牛掰，开源且免费

你也可以搞一套,别人有开源的,换套UI,优化优化.解决一些痛点.兼容性多点.又是一套了.

囤不完，根本囤不完

牛掰！活雷锋在世！为啥这么大？

万恶的node_modules都138M

使用官方的脚手架，就有这个一个操蛋的问题，插件要发布出去，如果包体大，用户在下载安装的时候有概率解压失败，因为node_modules目录的碎片化太严重。

如果我想减小包体，其实像vit、vue、fs-extra（一些编辑器自带的package）包括一些devDependencies，是没有必要随插件一起发布出去的，然后你就要想办法，把这些package剔除了，而官方插件模版其实没有帮你做这件事。

当然了，这些问题其实存在，也不会影响插件的正常使用，都是一些优化，所以我看到50M的zip，我是有点吃惊的。

下边就是我的硬广：cc-plugin让插件开发更简单

只是个尝鲜的demo，而且用vite打包，发布的时候大部分node_modules都可以删除，编辑器内4MB就可以运行

还支持electron的桌面端，脱离编辑器使用，方便做窗口置顶配合web使用，等整理好了两个版本会一起发出来

我做的那个Chrome插件版本，也有半年多了，日活稳定1500，我得到的经验就是，能做出来不一定能卖出去，营销也是一门技术，中间我也开源代码了，其实意义不是很大，除了满足自己的虚荣心，别无他用。
我意思是你得考虑分发的问题，不过可能过两天官方就给你发公众号宣传一波，这个真的有可能，不过流量也就这一波，过去了就没了。
就目前来说，这个架构形式的inspector分发是个难题，其实大部分的开发痛点在web环境都能得到解决，debug native的时候，我是感觉不会再专门针对节点树了，都是针对渲染级别的问题。
还有从开箱即用的角度来说，你这个需要花费点精力，你的这个架构其实我也探索过，总结就是这个赛道太卷了，而且随着官方后续版本迭代，如果只有节点树相关的功能，肯定没啥吸引人的，所以只能吃老版本的用户，就是2x那些，因为编辑器没有自带运行时节点树。
然后就会陷入一个所有软件都会面临的问题:如何让这个产品持续迭代下去，我该如何拉取到更多的用户？没用用户使用就没有产品价值，无论是免费还是各种推广，你会发现拉到新用户真tmd的困难啊

以上就是我做inspector的领悟，我发现玩到最后就是流量生意，技术是最简单的一个环节，真羡慕尤雨溪，人家是怎么把开源做的风生水起，最关键人家不是科班出身的。

讲了太多扎心的真话，以后我少说点

是的 流量就一波 过几天就没了

没有优秀产品背书，比如魔兽早期脚本都是用lua写的，lua在游戏圈就起来了，东西好不好其实没那么重要不要太差就行但是要有产出被验证过

你说的这些我也考虑过，不过我的想法没那么多，没想赚钱，没想赚流量，刚好是自己公司项目要用，就了解了下，免费的看过两个，试用的也用了一下，有好有坏，几个免费的或者价格低的有几个问题，有的是定时刷新，体验不好，同步也不及时，谷■插件的版本也试用过，不知道什么原因会有情况导致浏览器卡死，有的是没有做自定义组件的属性暴露，而且大部分都是在web端，同一上下文获取节点信息，我们公司自己项目是做原生端app的，所以有需求考虑远程查看节点信息，也是在做的过程中发现有别的大佬已经做过这种插件，并且功能很多，而且插件商店免费，不过看了下好像还是有额外付费，所以还是坚定自己做一个简单点的版本，至于免费开源，我只是表明态度不靠这个赚钱，我也知道意义不大，大部分人在意的都是开箱即用，怎么方便怎么用，这个确实是个问题，不过做都做了，遇到问题再想办法解决吧，至少还在做creator项目的时候会维护这个吧，而且以后官方可能会出现更好的解决方案，咱们做的这些也只是中间的过渡东西，解决现有需求的

插件的仓库地址已经放出，添加了Electron的版本

大大的赞

你这插件我用过，原因很简单，Mac 上太卡了，运行两次我就卸载了。

用着那个功能差一点的，但是人家不卡啊

我的头像你是真用上了

下个版本会重点优化，肯定睡服你，让你重新装上

期待，哈哈