3DOM

View a heatmap of your DOM in real time

Overview: 3DOM bridges the gap between traditional web debugging and 3D graphics rendering. By injecting directly into Chrome DevTools, it allows developers to visualise and inspect DOM trees and WebGL hierarchies as 3D structures, making spatial debugging intuitive and efficient. Key Features: Live 3D inspection: Render and navigate complex DOM hierarchies in an interactive 3D viewport. DevTools Integration: Seamlessly embeds right into your browser's developer tools panel. Real-Time Sync: Highlights and updates node states dynamically as the underlying DOM changes. Optimized Performance: Built with Three.js and TypeScript for smooth rendering and strict type safety. Usage: Open your target webpage in Chrome. Open Chrome DevTools. Navigate to the 3DOM tab in the top panel and refresh the page to start. Controls: Left-Mouse Button: Orbit Scroll Button: Zoom Right-Mouse Button: Pan The source code for the extension is available here: https://github.com/nkminion/3DOM