Cocos Creator Inspector 2.4

DevTools helper for inspecting Cocos Creator 2 games.

# Cocos Creator Inspector 2.4 ## Description Cocos Creator Inspector 2.4 is a Chrome DevTools extension for inspecting and debugging Cocos Creator 2.x 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. 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. - 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, orientation, mobile/desktop mode, FPS, FPS limit, pause/resume, time scale, physics debug draw, collision debug draw, recompile, and theme switching. - Custom device presets and default-device settings. - 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. - 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.x 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 Cocos Creator 2.x 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