Turning Your Websites into 3D View | Firefox 3D DOM Viewer

Turning Your Websites into 3D View | Firefox 3D DOM Viewer

Abhijit Jana agoWeb Developer Toolbar

Recently I came across with a very interesting things – 3D DOM (document object Model) view of a web site. This is an excellent feature that enables the multiple level structured view of a Web Site. As a Web Developer / Designer, this can brings an incredible flexibility to view the site structures, element hierarchies and web site layers.

 

You can achieve this by using the Firefox developer toolbar. To start the 3D view, you need click in 3D view icon after launch the “Developer Toolbar”.

Start 3D View of Web Site

Fig: 3D View Icon Selection from Developer Toolbar

 

Once you select the 3D view, you will find the web site turns into a 3D layered structure.  You can then inspect the web site in a 3D mode. You can rotate, scroll, zoom in/out and select elements to explore. This uses WebGL( Web Graphics Library ) – A JavaScript API for rendering 3D object elements.   The complete rendering will show you the different level of layers and how the web site is structured.

3D View of Web Site 3D View of Web Site Daily Tips

Fig: 3D View  of Daily.NET Tips web site

This 3D view technology can be very useful to debugging and optimizing the layouts such as

  • If any tag is closed / misplaced.
  • Some object are not appearing in web site may be because of some z-index
  • some unnecessary tag elements

Related Post : Run Web Application in Multiple Browser Simultaneously from Visual Studio

I found an excellent introductory video on 3D view of web site, check this out.

 
Seems this features was introduced with Firefox version 11, but to be very honest I was unaware about this.  When I was discussing this with few of my friends, they seems liked it very much and for few it was new too.  So, it may be known to many of you, but few might found interesting, thus sharing here!

Hope you will like it !

Share on Pinterest Share on LinkedIn
Abhijit Jana

Abhijit runs the Daily .NET Tips. He started this site with a vision to have a single knowledge base of .NET tips and tricks and share post that can quickly help any developers . He is a Former Microsoft ASP.NET MVP, CodeProject MVP, Mentor, Speaker, Author, Technology Evangelist and presently working as a .NET Consultant. He blogs at http://abhijitjana.net , you can follow him @AbhijitJana . He is the author of book Kinect for Windows SDK Programming Guide.

You Might Also Like:

2 Comments to “Turning Your Websites into 3D View | Firefox 3D DOM Viewer”

  1. Vuyiswa Maseko

    This is very interesting. I do this all the time ,especially when i downloaded a website template that needs to be customized , i have to change some of the Properties of the CSS and i mostly use F12 developer tool in Chrome to get the Styles of that Element. Sometimes is very time consuming to do this without a bird eye view. now if Firefox gives me this in 3d 🙂

Comments are closed.