React Three DOM

About

React Three DOM DevTools adds an R3F tab to Chrome DevTools so you can inspect your React Three Fiber scene like the DOM.

What it does
• Scene tree — Browse meshes, groups, lights, and other Three.js objects in a tree view
• Search — Find objects by name, type, or testId
• Selection — Click nodes to select; selection in the panel highlights the object in the 3D view
• Property inspection — See position, rotation, scale, geometry type, material type, and more

Why install it
• Debug R3F scenes without console logging or guessing object names
• Verify hierarchy and object counts while building or testing
• Inspect metadata (vertices, triangles, materials) in one place

Requirements
Your app must use @react-three-dom/core and include <ThreeDom /> inside R3F’s <Canvas>. Then open DevTools (F12) and click the R3F tab.

No account or setup beyond installing the extension. Open source and built for the React Three Fiber ecosystem.