cc-inspector

Debug games made with CocosCreator and display node trees and node properties

这是一个免费的扩展，开箱即用，无须任何额外的安装，可以帮助你调试🦆CocosCreator🐤制作的游戏，显示游戏运行的节点树，以及节点树的组件属性，在排查游戏问题时，非常有帮助。 调试面板左侧为层级管理器，用于展示游戏的节点树，右侧为属性检查器，用于展示节点的详细属性，可以灵活调整2个面板的宽度。 ## 为什么选择该插件？ 1️⃣😍免费开源 2️⃣💯支持所有CocosCreator版本 3️⃣🤟功能丰富强大，满足开发游戏的常用Inspect需求 4️⃣💻与Chrome浏览器深度融合，开箱即用 5️⃣💁‍♂️作者本人也在使用，迭代更新频繁 ## 🍉特点： 1️⃣同时支持调试Creator2.x和Creator3.x制作的Cocos游戏。 2️⃣层级管理器、属性检查器支持自动/手动刷新。 3️⃣制作的游戏在iframe嵌套，同样也支持调试，并且支持自由切换调试目标。 🍎层级管理器：展示游戏的节点树 1️⃣滑过、选中节点时，游戏内高亮显示节点位置，便于观察节点位置。 2️⃣支持使用上下左右方向键快速折叠、展开、选中节点树。 3️⃣支持使用空格快捷键，控制节点的显示隐藏。 4️⃣右键选择`destroy`销毁某个节点。 5️⃣🔍支持模糊搜索节点，按照路径搜索节点，查找更方便。 6️⃣显示Sprite、Label、Button等类型节点，预制节点绿色标记，观察节点结构非常方便。 🍏属性检查器：展示节点的详细属性 1️⃣如果属性引用了节点，支持在节点树中高亮显示引用。 2️⃣支持属性精简显示和全部显示，方便在不同情况下观察属性。 3️⃣支持鼠标拖拉调整数值，在调整坐标时，非常方便。 4️⃣支持在控制台打印组件，方便观察全貌。 🗡️调试小助手：在游戏的网页中显示增强功能的入口 1️⃣支持fps显隐，游戏暂停步进等控制。 2️⃣支持拖拽调整位置、自动隐藏，不干扰用户。 3️⃣支持在游戏界面拾取节点，节点信息会同步选中到层级管理器和属性检查器。 4️⃣支持按照类型拾取节点，支持展示鼠标位置的所有节点。 5️⃣支持快捷键一键拾取节点，使用起来极度丝滑。 🚀更多完整功能动态图演示，请查看： https://juejin.cn/post/7463836172559024179 🧙‍♂️Cocos论坛： https://forum.cocos.org/t/topic/164888 🏠插件官网： https://tidys.github.io/cc-inspector-chrome/inspector.html 🌈github开源地址： https://github.com/tidys/cc-inspector-chrome 📺BiliBili视频介绍： https://www.bilibili.com/video/BV1jzcHeSEh3/ 📺YouTube视频介绍： https://www.youtube.com/watch?v=ajMz3zEFTA8 ❤️如果你喜欢该插件，请分享给你的朋友。 🎁如果可以，在CocosStore支持我一下： https://store.cocos.com/app/detail/2002 ----------------------------------------------------------------------------------------------------------------------------------------------- This is a free extension that works out of the box without any additional installation. It can help you debug games made by CocosCreator, display the node tree of the game, and the component properties of the node tree, which is very helpful when troubleshooting game problems. On the left side of the debug panel is the hierarchy manager, which is used to display the node tree of the game, and on the right side is the property inspector, which is used to display the detailed properties of the node. The width of the two panels can be flexibly adjusted. ## Features: - The extension automatically retrieves and refreshes the node tree and its status - The game made is nested in iframe, and debugging is also supported, and the debugging target can be switched freely. - It also supports debugging Cocos games made by Creator2.x and Creator3.x. - In the hierarchy manager, you can use the up, down, left, and right arrow keys to quickly fold, expand, and select the node tree. - In the hierarchy manager, you can use the space shortcut key to control the display and hiding of nodes. - In the hierarchy manager, you can right-click and select `destroy` to destroy a node. - In the property inspector, if the attribute references a node, the reference can be highlighted in the node tree. - The property inspector supports simplified and full display of properties, which is convenient for observing properties in different situations. - The properties support adjusting the value by dragging the mouse, which is very convenient when adjusting the coordinates. - Supports printing components in the console, which is convenient for observing the whole picture.