# Cocos Creator Inspector 2.4
Inspect Cocos Creator Games Directly in Chrome DevTools
Debugging a Cocos Creator 2.x web game can be slow when you constantly need to switch between the editor, the browser, console logs, and runtime scripts just to understand what is happening in the current scene.
Cocos Creator Inspector 2.4 is a Chrome DevTools extension built to make that workflow faster. It adds a dedicated `cci-2.4` panel to Chrome DevTools, allowing developers to inspect the live Cocos Creator runtime directly inside the browser.
Chrome Web Store: https://chromewebstore.google.com/detail/cocos-creator-inspector-2/omldaloggokfpiciomplbnebkcfiecic
## Inspect the live scene hierarchy
The extension provides a Hierarchy view for browsing the active node tree of a running Cocos Creator game.
You can inspect nodes, expand and collapse branches, search by name, and filter by useful runtime categories such as components, renderable nodes, text, animation, Spine, and Button/Toggle nodes.
### Hierarchy nodes
The Hierarchy panel is designed to stay close to the way Cocos Creator developers already think about scenes. It shows the runtime node tree, not just static editor data, so you can inspect what is actually loaded in the browser.
Nodes can show useful visual states such as active, inactive, transparent, renderable, and component-related information. When a node is selected, the Inspector updates with live data from that node.
You can use the Hierarchy to quickly check:
- Node name and nesting.
- Parent and child relationships.
- Whether a node is active or inactive.
- Whether a node is visible or effectively hidden.
- Whether a node has render-related components.
- Whether a node contains common interactive components such as Button or Toggle.
### Hierarchy search and filters
The search box can filter the current runtime hierarchy without forcing a full scene reload.
Useful filters include:
- All nodes.
- Animation nodes.
- Button/Toggle nodes.
- Component search.
- Node name search.
- Path search.
- Renderable nodes.
- Spine nodes.
- Text nodes.
- UUID/type search.
This is useful when a scene has hundreds or thousands of nodes and you only need to find one specific runtime object.
This makes it easier to answer common debugging questions:
- Is this node active?
- Is it visible?
- Is its parent disabled?
- Does it have the component I expect?
- Is it actually present in the loaded scene?
## View node and component details
Selecting a node shows detailed runtime information in the Inspector panel, including node properties, components, references, events, world scale, world size, and other useful data.
This is especially helpful when debugging UI behavior, broken references, wrong component values, or runtime changes that are difficult to see from the editor alone.
### Node and component inspection
The Inspector can show `cc.Node` values, built-in Cocos components, custom script components, references, assets, arrays, vector values, color values, and selected runtime metadata.
For supported fields, values can be edited directly from the panel. Changed values can be highlighted with a Cocos Creator-style color, making it easier to compare runtime values against defaults.
Reference fields are shown as compact cards. You can see the reference type and target name, clear supported references, and hover a reference to highlight the matching node in the Hierarchy.
### Useful Inspector details
The Inspector is helpful for checking:
- Node active state.
- Position, rotation, scale, anchor, size, color, opacity, skew, and group.
- Built-in components such as Canvas, Widget, Sprite, Camera, Label, Button, Toggle, Layout, Mask, ScrollView-related components, Slider, PageView, VideoPlayer, Light, MeshRenderer, ParticleSystem, Animation, and more.
- Custom component properties.
- Node Info such as path, world position, world rotation, world scale, world size, and world opacity.
- Registered Events when enabled from settings.
## Debug layout and bounds visually
Cocos Creator Inspector 2.4 includes visual overlay tools for checking node bounds, canvas bounds, parent bounds, render canvas bounds, and hover rectangles.
These overlays help diagnose UI layout issues such as incorrect anchors, unexpected scaling, invisible nodes, zero-size containers, or elements that are positioned correctly but rendered outside the expected area.
## Test devices and preview settings
The toolbar includes device and runtime controls for changing preview size, scale, orientation, mobile/desktop mode, FPS display, FPS limit, pause/resume, time scale, and recompile behavior.
You can also define custom device presets and choose how the extension restores device settings between reloads.
### Preview toolbar
The preview toolbar helps test browser builds without constantly changing the project or editor preview settings.
It includes:
- Device presets.
- Custom width and height.
- Scale.
- Aspect ratio display.
- Mobile/Desktop mode.
- Portrait/Landscape rotation.
- Pause/Resume.
- Time scale.
- Recompile.
- FPS display.
- FPS limit.
- Dark/Light theme toggle.
The toolbar can apply runtime preview changes through Cocos public APIs where available, while avoiding unsafe preview resizing for non-local remote pages.
## Customize the inspector
Cocos Creator Inspector 2.4 includes settings for toolbar items, hierarchy colors, selected and hovered node styles, inactive node colors, Inspector row spacing, component title colors, changed-value highlighting, reference colors, and dark or light theme mode.
These settings make it easier to match the panel to your debugging workflow and keep important runtime differences visible while inspecting complex scenes.
### Settings sections
The Settings panel is split into focused sections:
- General: theme mode and text scale.
- Hierarchy: icons, attached nodes, auto reload, expansion behavior, node colors, selected/hovered node colors, hover border width, and measurement overlay colors.
- Inspector: row spacing, changed-value highlighting, `cc.Node` buttons, component actions, custom component options, title colors, value colors, Node Info visibility, Registered Events visibility, and messages.
- Toolbar: show or hide individual top bar items in the same order they appear on the toolbar.
- Devices: choose the default device behavior, manage custom devices, and reset device presets.
- Local Storage: view, edit, create, refresh, and delete Local Storage entries for the inspected frame.
- Iframes: inspect frames that may contain the Cocos runtime.
- DevTools Frames: choose the correct DevTools frame target when a page has multiple frames.
### Hotkeys
The Hierarchy supports keyboard shortcuts for common navigation and editing actions.
Useful shortcuts include:
- Arrow Up / Arrow Down: move selection.
- Arrow Left / Arrow Right: collapse or expand nodes.
- F2: rename the selected node.
- Insert: duplicate the selected node.
- Delete: delete the selected node.
These shortcuts make the Hierarchy feel closer to a lightweight runtime editor while staying inside Chrome DevTools.
### Lightweight package
The build package is intentionally small. The current zipped package is about `77.3 KiB`.
Compared with a package in the multi-megabyte range, this is roughly 35 times lighter. Keeping the package compact makes the extension easier to inspect, upload, and maintain.
## Work with iframes and DevTools frames
Many Cocos Creator web games run inside iframes or nested frames. The extension includes tools for inspecting available frames and selecting the correct Cocos runtime target.
This helps avoid guessing which frame contains the active `cc` runtime.
## Built for Cocos Creator 2.x workflows
Cocos Creator Inspector 2.4 is designed for developers who work directly with Cocos Creator 2.x browser builds and need a faster way to inspect runtime state.
It is useful for:
- UI debugging
- Scene hierarchy inspection
- Component and property checking
- Device preview testing
- Runtime layout verification
- Changed-value inspection
- Local Storage inspection
- Frame and iframe debugging
## Privacy Policy for Cocos Creator 2 Inspector
Effective date: August 28, 2026
Cocos Creator 2 Inspector is a Chrome DevTools extension that helps developers inspect and debug Cocos Creator 2 web games.
The extension runs inside Chrome DevTools and reads runtime information from the currently inspected page when the user opens and uses the `cci-2.4` panel.
It does not collect, sell, or share personal data.
It does not send inspected game data, scene data, local storage values, or runtime information to an external server.
Any settings saved by the extension are stored locally in the browser.
## How to use
Install the extension from the Chrome Web Store, open a Cocos Creator 2.x web game in Chrome, open DevTools, and select the `cci-2.4` panel.
From there, you can inspect the live scene, select nodes, view component data, adjust preview settings, and debug the running game directly from DevTools.
Cocos Creator Inspector 2.4 brings the runtime scene closer to where debugging already happens: the browser.
Chrome Web Store: https://chromewebstore.google.com/detail/cocos-creator-inspector-2/omldaloggokfpiciomplbnebkcfiecic
## Version history
- `0.3.0` — September 10, 2026: First documented release in the public version history.
## Contact
If you have questions about this privacy policy, contact:
## Screenshots
