Mozilla has released a cool, experimental Firefox extension named Tilt that lets you visualize any web page has if it’s a 3-dimensional entity. The extension takes the DOM structure of the webpage and layers each node based on the nesting in the tree, creating stacks of elements, each having a corresponding depth and being textured according to the webpage rendering itself. The visualization is drawn using WebGL.
To test the extension, just download the XPI file from Github or from this direct download link, then drag and drop it on Firefox to open it. After installation and browser restart, open any webpage and click on Tilt from the Tools menu. Now use the mouse to maneuver the page in 3D.
Using the mouse you can control yaw, pitch, roll, pan, and zoom. You can also use the keys A,S,D,W and the arrow keys to flip and turn the page. To exit the 3D mode, press the Escape key.
Aside from the fun, there is something for the developers too.
Tilt allows for instant analysis of the relationship between various parts of a webpage in a graphical way, but also making it easy for someone to see obscured or out-of-page elements. Moreover, besides the 3D stacks, various information is available on request, regarding each node’s type, id, class, or other attributes if available, providing a way to inspect (and edit) the inner HTML and other properties.
Checkout the video demonstration below.
This addon has been permanently integrated into Firefox as "Page Inspector 3D View" since March 13, 2012.
ReplyDeletehttps://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-developer-tools-and-add-on-sync/