Chrome plugin: cc-inspector, displays node tree and node properties

[xu_yanfeng]

In fact, this plug-in has a long history and has taken a lot of my energy. It has been 7 years since the first version was released in January 2018. With my technical accumulation, this plug-in has gradually become more professional. I have written several ways of inspector, and finally I still feel that the chrome way is the most convenient.

This is a free extension, which has been released in the chrome store. Considering that it may not be downloaded and installed normally in China, a copy is synchronized in the store. If you pay for the plug-in, thank you for your support. Thank you.

• github (yes, it’s open source, you read it right): GitHub - tidys/cc-inspector-chrome: Chrome插件

• youtube: https://www.youtube.com/watch?v=ajMz3zEFTA8

• chrome: https://chromewebstore.google.com/detail/cc-inspector/hejbkamkfnkifppoaljcidepkhgaahcj?hl=zh-CN&utm_source=ext_sidebar

• bilibili: chrome插件cc-inspector v2.1.1版本更新_哔哩哔哩_bilibili

• store: https://store.cocos.com/app/detail/2002

It’s ready to use, no additional installation is required, it can help you debug games made by CocosCreator, display the node tree of the game running, and the component properties of the node tree, which is very helpful when troubleshooting game problems.

The left side of the debug panel is the hierarchy manager, which is used to display the game’s node tree, and 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.

Usage Tutorial

Note that this is a chrome plug-in, not a Creator plug-in

1. Unzip the downloaded plug-in

2. Open the chrome extension management interface chrome://extensions/

3. Click Load unzipped extension and select the directory you just unzipped, which has manifest.json.
4. Run the game using the Chrome browser
5. Open chrome devtool and select the cc-inspector tab
   
6. Under normal circumstances, the plug-in will display the game’s node tree and its node properties
   

Features:

• The plug-in automatically retrieves and refreshes the node tree and its status
• The game is nested in iframe, and debugging is also supported, and debugging targets can be switched freely.
• Support 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, it supports highlighting the reference in the node tree.
• The property inspector supports simplified display and full display of attributes, which is convenient for observing attributes in different situations.
• The attribute supports dragging the mouse to adjust the value, which is very convenient when adjusting the coordinates.
• Support printing components in the console for easy observation of the overall picture.

Contact the author

• Email xu_yanfeng@126.com
• WeChat ID xu__yanfeng

[xu_yanfeng]

Here is my favorite cocos as my small contribution to cocos