Tilt: a Firefox Addon for Viewing, Debugging and Editing Webpages in 3D

Are you a web developer and is Firefox your main browser? Then I suggest taking a look at Tilt: an addon that enables you to view the structure of a webpage in 3D. Not only does this look truly awesome but it is also very helpful and educating when used to view existing websites.

You can even use it with Firebug and Style Editor at the same time. Here is a quote from Mozilla blog post, which is linked below:

Because Tilt is able to detect when a webpage’s DOM structure changes or when a repaint is necessary, integration is seamless with existing Developer Tools. Using Tilt and Firebug or Style Editor at the same time is easy. One can enable or disable CSS properties, changing the style of a node, and the visualization changes accordingly.

Tilt can be extremely useful for solving nesting problems:

Tilt is useful when searching problems in the HTML structure (like finding unclosed DIV elements for example) by providing the extra third dimension, layering each node based on nesting in the DOM tree. Stacks of elements visually represent branches in the DOM, and each node can be inspected for the inner HTML contents, its computed CSS style and the attributes.

For a detailed explanation of the addon and a couple of cool videos that demonstrate it, click the link below.

Link : hacks.mozilla.org – Debugging and editing webpages in 3D