What problem does it solve? Debugging Three.js scenes normally requires manual console logging and guesswork to find invisible objects, broken shaders, or performance bottlenecks. This Skill gives AI agents direct access to a running scene through Chrome DevTools Protocol, enabling real-time inspection and editing without code changes. ## Core Features & Use Cases - Scene Inspection: Query the full scene graph, object details, cameras, lights, and materials with 59 MCP tools. - Material & Shader Editing: Update colors, metalness, roughness, and custom vertex/fragment shaders live in the browser. - Performance Monitoring: Track FPS, draw calls, triangles, and memory usage to diagnose rendering bottlenecks and leaks. - Use Case: A developer's GLTF character loads but is invisible and the scene runs at 15 FPS. The agent runs check_common_issues, finds a zero-scale transform, fixes it, then uses get_render_info to identify 450 draw calls and recommends geometry merging. ## Quick Start Ask the AI to show the scene tree and check for common issues in your running Three.js app after installing the MCP server with npx threejs-devtools-mcp.
