Tilt is a great new Firefox extension that uses a 3D model to visualize any web page DOM.
Tilt is a Firefox add-on, but it’s in the very early stages of development so you’ll need to manually install it. Head over to GitHub to download a copy, and then drag the downloaded file into Firefox to install it.
A webpage’s Document Object Model, better known as the DOM, is typically visualized as a tree, with nested HTML nodes arrayed like leaves around the trunk of the page (the tag). Tilt uses the same idea, but maps the DOM into a 3D object, so that nodes are stacked on top of each other. You can then interact with the resulting visual model, tilting, rotating, flipping, panning, zooming and otherwise exploring the page structure within the browser window.
If you want more info about a particular DOM node, just double-click it and a small editor window will pop up, showing more useful information about the node and the inner HTML.
Mozilla has put together a short video showing off what Tilt can do:
Tilt started out as a Google Summer of Code project by developers Victor Porof, Cedric Vivier and Rob Campbell, but it’s since morphed into a Mozilla Developer Tools project.
Tilt isn’t for everyone, but if the typical DOM tree metaphor has never really made sense to you, perhaps Tilt’s 3D visualization will help.
