Inspect Element in Firefox is one of the good feature for a web developer to understand the structural layout of any particular HTML page. Certainly it would be of some help when you are confused of the structure of a page. It will show you the structure of the elements in 3D to help you distinguish which particular elements are enclosed under which particular elements. However the order of HTML tags that are shown at the bottom of the page are enough to understand the structure of any particular element of a HTML page but in contrary 3D view will show you the structure of all the elements that are there in a webpage.
How to use Firefox Inspect Element 3D View Feature ?
To see the structural layout of any web page in 3D using Firefox Inspect Element follow the steps.
1. You need to select Inspect Element Option which you can see when you right click on the web page.
2. As soon as you select on Inspect Element Firefox will show you the HTML code responsible for it in the bottom window and you can see the CSS properties responsible for it in the right side window if you select the “Style” option available at bottom bar. To View the elements in 3D you need to select the option 3D View as shown in the screenshot.
3. Once you click on 3D View, The Page will be shown in 3D which is rendered using WebGL .
Why 3D View Option is Missing ?
There are 3 probable reasons for which the 3D view option is not shown for any case
1. Firefox is not up to date.
2. Problems with your Graphics Card
3. You have changed the configuration preferences of Firefox
1. Firefox is not up to date 3D View
The minimum version of firefox that is needed to show the 3D view button is 11. To check the version of the firefox that you are using go to menu HELP -> About Firefox, you must find the version of the firefox that you are using in the second line, If that is above 11 then ignore this case and if it is below 11 , you need to update the firefox.
2. Problems with the Graphic Card
The most common reason why firefox does not show 3D view is because your graphics card is not supporting WebGL rendering through which 3D view is rendered. To check if it is because of the compatibility issues with the graphic card, Go to menu HELP > Troubleshooting Information which will bring you up the trouble shooting information there you need to see the graphics trouble shooting information.
If WebGL Renderer is showing up the Graphics Card Driver name then everything is fine with your graphics card and if it is showing something else like it is blocked then you must have to check if your Graphic Card supports WebGL rendering and try updating the Drivers Software for display. If you have any queries regarding this please comment below, I will try to help you.
If everything is fine you must able to see the rotating cube in WebGL.ORG page and it will confirm you saying that your browser supports WebGL.
3. You have changed the configuration preferences of Firefox
If both of the above reasons are not true for you then the probable reason for 3D View not shown up is you have changed the default configuration preferences of firefox. The default configuration preferences should be enough to show the 3D View but let us try changing the preferences that should effect 3D View and see if it is working.
To change the configuration preferences type about:config in your address bar which will bring up the configuration preferences of firefox then try changing the vaues of the following preferences to the values shown below.
Preference Name | Preference Value |
---|---|
webgl.disabled | false |
webgl.force-enabled | true |
webgl.msaa-force | false |
layers.acceleration.disabled | false |
layers.acceleration.force-enabled | true |
gfx.direct2d.disabled | false |
gfx.direct2d.force-enabled | false |
After changing the configuration preferences settings to the values shown above, try again if 3D View is working even if it is not working try resetting Firefox from the option available in menu HELP -> Troubleshooting Information
Try installing 3D Tilt View Addon as a final try. It should work fine after all these changes and still if you face any problems please feel free to post your query in the below comment section.
Hi Pavan
Thanks for the great information, have not tried this yet but I am updating my Firefox to see how it works.
Thanks ~Sapna
Hey Sapna,
Yeah, It is kind of fun to play with Firefox Inspect 3D Element and at the same time it will be handy at times. Give a try on it, Hopefully you will be liking it and thanks for stopping by.
Keep in touch.
Regards,
Pavan Kumar.