Read a Random Post

[Solved] How to Enable 3D Inspect in Firefox 11 When It is Not Showing Up?

Written by

Topics: Tips & Tricks

Mozilla recently launched Firefox 11 on March 2012. This version included many useful features for web developers like the Style Editor, 3D page inspection of Webpage DOM structure and redesigned HTML5 video controls. Apart from this it included other features like data migration from Chrome and Add-on Sync. One feature that has caught the eyes of many is the capability to view and inspect a site in 3D view. Though I am not sure how practical it will be in debugging layout issue it is certainly stunning and eye catching! This feature seemed to be liked by all sorts of users given the awesomeness of it. This post aims at addressing what to do when you are not able to see the 3D button though you have updated to Firefox 11. This is the button which helps in inspecting a page in a multidimensional view.

3D site inspection in Firefox 11

Firefox put-forth some places where this feature will come in handy:

1. If your HTML is broken causing layout problems, looking the page in a 3D perspective can help find where you’ve gone wrong.

2. 3D view helps you in sorting out the problem when content isn’t displaying properly because this view lets you zoom out to see elements that are rendering outside the visible area of the page, thus enabling you to track down the problematic content this way.

3. Helps in identifying ways in which you can optimize your layout.

This feature isn’t something new in Firefox it was previously available in the form of Tilt 3D Add-on. Which now has been integrated into Firefox.

How to Enable 3D page inspection feature in Firefox 11

1. To access this feature, first update your Firefox to 11 from Help-> About Firefox and click check for updates.

2.Once updated go to the page you want to see in 3D. Right click and select Inspect Element (Q). Now you will see a breadcrumb bar below with three buttons on the right corner namely 3D, HTML and Style.

3. Now click on the 3D button. You can now use your mouse to zoom in and out or turn around the page. In case you don’t see this inspect button read ahead.

Why 3D inspect button is not visible in your Firefox 11 ?

For getting this feature work. Your video card needs to support WebGL. Do the following

1. First check if WebGl is enabled in Firefox. Type about:config in address bar and press Enter. Then click the I’ll be careful, I promise! button.

2. Type webgl in search. Check if webgl.disabled is set to false. If not double click to toggle its value. Similarly check if webgl.force-enabled is set to true.

3. Now visit Check WebGl Support site. Typically you should see a spinning cube if not you need to update your graphics drivers to enable the 3D inspection button.

Test if Browser Supports WebGl

4. You download the latest driver from official site of your card manufacturer. To find the manufacturer right click My computer-> Properties-> Hardware -> Device Manager-> Display Adapters. Now expand the tree to see to find what card you are using. Download drivers from the below official sites.

Intel
AMD/ATI
NVIDIA

Select the appropriate card name, download the drivers and install them. If you are not sure of the card series or if it is not available in the list use auto detect and install feature if available which I did in my case for ATI drivers.

Download latest graphics drivers

5. Once installation is completed, restart your PC. Confirm WebGl support by going to previously mentioned site. Now check if 3D button is enabled for you.

[Update- April 13,2012] If you see spinning cube yet unable to see the 3D Dom inspector, try force enabling by doing the following:

– Go to about:config and set webgl.force-enabled as true.

– Set webgl.msaa-force as true.

– Set layers.acceleration.force-enabled as true.

– Set gfx.direct2d.force-enabled as true

Now restart Firefox and check it. Even then if you don’t find the button you can try manually installing Tilt 3D addon and restart again.

Activate Tilt via Tools-> Web Developer -> Tilt or by pressing Ctrl+Shift+M. Find the below screenshot where button is not available yet I am able to do 3D inspection using Tilt add-on.

3D inspection using Tilt Addon

Did it work for you ? Were you able to get the 3D view working ? or Still not working? Drop in your view and alternatives you know!

24 Comments For This Post I'd Love to Hear Yours!

  1. Didn’t work for me. I have Firefox 11 and I can see the spinning cube, but there is no 3d button. Any other suggestions?

    • Shunmugha Sundaram says:

      Hi Mother Theresa,

      Thanks for your comment. I have updated the article to address your problem. Try those suggestions as well.

      – Try Force enabling Web Gl
      – Install Tilt 3D add-on manually.

    • Same here didn’t work for me…and i dont know why. Thanks for the info though

  2. Didn’t work for me

  3. Ankit says:

    thank you so much… it worked for me…

  4. A little late.. says:

    i’m a little late, but i don’t have webgl.msaa-force in my config settings at all. if i right click then select new, it gives me three options. should i try to re create it?

    • Shunmugha Sundaram says:

      Yes. If the key is not present already, create a new one manually and set it to true and restart your browser.

  5. Thanks for the fantastic instructions. This worked well after updating drivers and forcing the config settings for FF.

    • Shunmugha Sundaram says:

      You are most welcome. Do spread the word on social networks if you liked this article 😉

  6. many thanks about this useful blog. it’s really helps me. thanks alot

    • Shunmugha Sundaram says:

      You are most welcome. Happy that you found it useful. Do spread the word. Stay in touch 😛

      Like us @ https://www.facebook.com/techawakening

      Subscribe to newsletter: http://techawakening.org/go/newsletter

  7. Jesse Heines says:

    Great post. A student told me that the reason I couldn’t see the 3D view was that my video card would not support it, but your various tweaks to the about:config page did the trick. I am posting a link to your post on my course website. Thanks again.

    • Shunmugha Sundaram says:

      Jesse Heines,

      That’s really good to hear. Thanks for the mention and do share this article on social networks too if you found it useful 😉

  8. Human Saviour says:

    It works for me !!!

  9. سئو says:

    It works for me
    thx

  10. maryam says:

    thanks for your help

  11. maryam says:

    thanks for your good post

  12. sara says:

    firefox is very good

  13. maryam says:

    Firefox & chorm are best

Trackbacks For This Post

  1. Firefox 3D Inspect Element Feature | House of Tech
  2. How to: How to enable the new 3D page inspector view in Firefox 11 #solution #dev #it | StackCopy

Leave a Comment Here's Your Chance to Be Heard!