Media
1 item
Description
Inspect React Three Fiber scene graph in DevTools 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.