Cocos Creator Inspector

DevTools helper for inspecting Cocos Creator games.

# Cocos Creator Inspector ## Description Cocos Creator Inspector is a Chrome DevTools extension for inspecting and debugging Cocos Creator 2.4.4 and 3.8.8 web games directly from the browser. It adds a `cci-2.4` panel to DevTools with tools for browsing the live scene hierarchy, inspecting selected nodes and components, adjusting preview devices, checking runtime state, and working with frames or iframes that contain a Cocos Creator runtime. ## Shared Settings Inspector rows Settings panels use the direct shared builders in `scripts/core-ui-controls.js`: - `z.ui.row(options)` builds the complete label/value row, including key, tooltip, copy metadata, indentation, row type, and value-column placement. - `z.ui.value(options)` builds the control (`text`, `number`, `checkbox`, `select`, `range`, `slider`, `vector`, `rect`, `color`, `textarea`, `button`, `array`, or `object`). - `z.ui.value({ type: "fields" | "actions", items })` composes multiple controls without embedding a long HTML fragment in a Settings renderer. - `z.ui.array(options)` and `z.ui.object(options)` build recursive collapsible children. - `z.ui.group(options)`, `z.ui.details(options)`, and `z.ui.section(label)` keep group structure consistent. - `z.ui.controlTooltip(control, options)` is the shared lazy formatter for editboxes and sliders. It computes Description, `Click to copy` when applicable, Current, Min/Max, Default, and text Length/Lines at hover time; callers must pass dynamic values/functions instead of prebuilt current-value strings. Keep the existing delegated `data-setting` and related data attributes. Do not create local row/value helpers for a Settings section, add a second Inspector adapter, or normalize the DOM after rendering. Main features: - Live Hierarchy view for Cocos Creator nodes. - Inspector view for node info, components, prefab metadata, properties, references, and events. - Direct editing for supported runtime values from the Inspector, with math expression evaluation on Enter or blur, mouse-wheel stepping, and Esc reset. - Fixed-width right-aligned value column layout maintaining uniform alignment regardless of nested group indentation depth. - Reusable Component, Bold, and Normal Inspector collapsible groups with expand/collapse carets, optional checkboxes, and action buttons. - Collapsible Inspector dependency groups for related runtime fields, with saved expand/collapse state. - Cocos-style event handler editing with target references plus component and handler dropdowns when runtime data is available. - Clearer asset reference display for Sprite-related data such as SpriteFrame and Atlas. - Assets view for inspecting runtime assets, with previews for SpriteFrame, AudioClip (interactive waveform with playback and seek), JsonAsset (rich JSON editor), font assets including BitmapFont glyph data, and `cc.ParticleAsset` data using a read-only ParticleSystem-style Preview group. - Progressive Media view for discovered image, video, audio, and SVG resources; quick results appear first, remaining resources are added in batches, and missing dimensions load lazily. Name, Ext, Width, Height, URL, and Preview columns are controlled from Settings > Media. Up/Down selects adjacent items; Ctrl+Up/Down selects the first/last item. - Progressive Assets rendering: stable identity rows appear before costly preview/Inspector data, selected UUIDs restore after Reload Frame, and an off-screen selected row is available from a clickable table-edge dock. - Asset-specific download groups can generate original/runtime files and matching `.meta` files for supported asset types, including ParticleAsset plist/texture files and EffectAsset source/meta files. - Store runtime nodes, components, and assets into browser console global variables (`temp1`, `temp2`, ...) with the `⧉ Var` button. - Cocos Creator-style changed-value highlighting for easier comparison. - Search and filter nodes by name, component, UUID/type, renderable state, text-related components, animation, UI interaction, masking, particle, sprite, Spine, and other common runtime categories. - Hover and selection overlays for node bounds, canvas bounds, parent bounds, and render-canvas bounds, including clearer handling for zero-size nodes. - Device toolbar for preview sizes, an editable `% Canvas` scale control, Canvas/Page PNG capture, orientation, mobile/desktop mode, FPS, FPS limit, pause/resume, time scale, physics debug draw, collision debug draw, recompile, and theme switching. Runtime-only controls are hidden when no Cocos runtime is detected; Canvas capture is hidden without a canvas and Capture falls back to Page. - Custom device presets and default-device settings. - Capture settings for timed Canvas/Page screenshot batches, local screenshot viewing, and PNG download. - AudioEngine settings for live master/music/effects control, playback actions, active-audio state, and AudioClip selection from Assets. - Automatic or manual hierarchy reload when scenes change. - Settings for hierarchy colors, inspector row layout, additional information, toolbar item visibility, overlays, measurement line widths, and node hover borders. - Settings > Media column visibility controls with a reset-to-default action. - Dark and light theme support. - Lightweight package with a small memory footprint and CPU-conscious refresh behavior. - Local Storage viewer/editor for the inspected game frame. - Iframe and DevTools frame tools for selecting the correct Cocos runtime frame. - Inspector reference hover that highlights the matching node in the Hierarchy. - Keyboard shortcuts for hierarchy navigation, rename, duplicate, and delete. - Safe remote-page behavior that avoids applying preview resizing to non-local pages. The extension is designed for developers working with Cocos Creator 2.4.4 and 3.8.8 projects who need a faster way to inspect runtime nodes, verify component data, debug UI layout, test device sizes, and interact with the live game scene without constantly switching back to the editor. It is intentionally kept lightweight to reduce browser memory footprint and CPU overhead while debugging. Runtime refresh work is scoped to the active view or selected node where possible, so it avoids doing unnecessary full-scene work continuously. To use it, install the extension, open a supported Cocos Creator game in Chrome, open DevTools, and select the `cci-2.4` panel. Learn more: https://zxcongducxz.blogspot.com/2026/08/cocos-creator-2-inspector.html