Ladies and Gentlemen! It’s being so long we have discussed something about Firefox. So I have decided to dedicate this post to Firefox. Today we will discuss about viewing DOM tree of any webpage in 3D. For those who don’t have an idea about what the hell DOM is, DOM defines the structure of a web page. It informs us how the web page is created. As you know it takes various elements like head body table lists etc. to create a web page. DOM defines the structure and relation of all these elements.

So now when the definition of DOM is clear let’s move on to our topic. So guys first of all you need Firefox4 or next versions. I have currently installed Firefox9. Now download this add-on known as tilt and install it. Once you install it make sure WebGL is enabled. To check for it follow these steps-

  • Type about:config in the URL bar of browser and accept the warranty notice.
  • Type webgl in the filter box. Set webgl.disabled to false and webgl.force-enable to true.

Now open any page and go to Tools-Web Developer-Tilt to view its DOM in 3D.
DOM tree of a web page in 3D using Tilt Firefox add-onIt’s a screen shot of Google page. Now click on any block and see the relevant code. It’s cool.

Enhanced by Zemanta