# Cocos Creator Inspector 2.4
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-related components, animation, UI interaction, masking, particles, sprites, Spine content, and other common scene objects.
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, `cc.Animation`, `cc.BlockInputEvents`, `cc.Button/cc.Toggle`, `cc.EditBox`, `cc.Label`, `cc.Mask`, `cc.MotionStreak`, `cc.ParticleSystem`, `cc.RichText`, `cc.Sprite`, and `sp.Skeleton` 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.
- Node name, path, UUID, and type search.
- Component and renderable-node search.
- Text-related component filters, animation, sprite, particle, masking, Spine, and UI interaction categories.
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, prefab metadata, references, assets, arrays, vector values, color values, and selected runtime metadata.
For supported fields, values can be edited directly from the panel. Input editboxes support arithmetic calculation on Enter or blur (e.g. `10 + 20`), mouse-wheel delta stepping, and Esc to reset. The Inspector layout enforces a fixed-width, right-aligned value column ensuring that all inputs remain perfectly aligned regardless of group nesting level or indentation depth. 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. Supported component summaries, assets, and debug sections include a `⧉ Var` button to store runtime objects into browser console global variables (`temp1`, `temp2`, ...).
Event handler rows are shown closer to Cocos Creator's workflow: target references are displayed as reference cards, while component and handler fields use dropdowns when the runtime can provide the available choices.
Sprite-related assets are displayed with clearer reference cards, including SpriteFrame and Atlas information when it can be resolved from the running game.
The Assets view can inspect runtime assets directly, including SpriteFrame previews, audio playback previews (with interactive waveform and seek), editable JsonAsset text, font previews, and a read-only `cc.ParticleAsset` Preview that follows the same field layout as a `cc.ParticleSystem` component. BitmapFont assets can show glyph details from the runtime font dictionary, with searchable glyph tables and a transposed view for compact inspection. Supported assets can also expose Download groups for their source files and matching metadata files, including ParticleAsset plist/texture files and EffectAsset source/meta files. Asset identities render before expensive preview and Inspector data, selection is restored after Reload Frame, and an off-screen selected asset has a clickable dock at the relevant table edge.
Related Inspector rows can collapse into focused groups when a field controls additional options. This keeps common rows compact while still exposing dependent settings when they matter, and the panel remembers manual expand or collapse choices across node changes.
### 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.
- Prefab metadata such as prefab UUID, sync state, file id, root path, optimization policy, and async-load flag when available at runtime.
- 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.
Canvas, parent, and render-canvas measurements use separate colors, making it easier to compare a selected node against the scene canvas, its parent, and the actual browser render area. Zero-size nodes are still measurable, so container nodes and marker nodes can be inspected without flooding the screen with confusing duplicate labels.
## Test devices and preview settings
The toolbar includes device and runtime controls for changing preview size, an editable `% Canvas` scale control, orientation, mobile/desktop mode, FPS display, FPS limit, pause/resume, time scale, physics debug draw, collision debug draw, recompile behavior, dark/light theme mode, and Canvas/Page PNG capture.
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.
- Editable `% Canvas` preview scale.
- Aspect ratio display.
- Canvas and Page PNG capture.
- Mobile/Desktop mode.
- Portrait/Landscape rotation.
- Pause/Resume.
- Time scale.
- Physics debug draw.
- Collision debug draw.
- 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:
- Assets: asset list columns, thumbnails, refresh behavior, and component-specific previews, downloads, and metadata versions.
- AudioEngine: live music/effect volume, playback, active-audio state, and AudioClip selection.
- Capture: batch Canvas or Page screenshots, image scale, grid/item viewing, and download controls.
- 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, dependency group layout, changed-value highlighting, `cc.Node` buttons, component actions, custom component options, title colors, value colors, `cc.Prefab`, Node Info, Registered Events, 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 `0.6.0` zipped package is about `190 KiB`.
Keeping the package compact makes the extension easier to inspect, upload, and maintain.
### Lower memory and CPU overhead
Cocos Creator Inspector 2.4 is designed to stay lightweight while DevTools is open.
The extension avoids unnecessary always-on work where possible. Hierarchy refresh, selected-node inspection, toolbar synchronization, and settings rendering are scoped to the active panel or the selected runtime object instead of repeatedly scanning everything in the scene.
This helps reduce memory footprint and CPU usage during long debugging sessions, especially on large Cocos Creator scenes with many nodes and components.
## 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: September 30, 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.
When the user explicitly requests a Page capture, the extension uses the active inspected tab and host access to create a PNG locally. Canvas and Page screenshots remain in the extension panel until the user downloads or clears them.
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.
## Version history
- `0.6.0` — September 30, 2026: Added Canvas/Page screenshot capture, AudioEngine controls, progressive Assets loading and selection restoration, asset edge docking, expanded asset previews/downloads, and associated Settings controls.
- `0.5.5` — September 22, 2026: Released with Inspector layout refinements, collapsible dependency groups, saved group expand/collapse behavior across node changes, and additional spacing/style consistency fixes.
- `0.5.0` — September 21, 2026: Released with Inspector serialization fixes for common Cocos value types, improved EventHandler dropdowns, expanded Hierarchy filters, and clearer Sprite asset reference display.
- `0.4.0` — September 17, 2026: Released on the Chrome Web Store with Hierarchy filter updates, prefab metadata display, prefab-aware Hierarchy tooltips, and Inspector additional-information settings.
- `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
