How to enable the new 3D page inspector view in Firefox 11

With firefox 11 there is a new feature called 3D page inspector which I would like to test because I think is really useful.

However, I can't really find where this should be enable or how to do it!

Can anyone help me with this? I'm going mad

Solution 1:

Invoke the Element Inspector using Ctrl+Shift+I or by clicking the appropriate menu item:

Now, pick an element on the page (optional):

By clicking the 3D button, you'll get the desired 3D view:

There is no "3D" button/It doesn't work. What now?

Firefox uses WebGL for the 3D view.

To my understanding, this feature was also previously available in the form of the Tilt addon. The blog says:

Available as an addon

The latest version of Tilt can be found on Github, but you can also download Tilt as an addon from addons.mozilla.org.

For compatibility, Tilt requires WebGL capabilities. Go to get.webgl.org to check availability and troubleshoot any issues. The current version works with Firefox 6.0 to latest 10.0 Nightly releases (latest Nightly builds now also support WebGL anti-aliasing, working great with Tilt).

To start Tilt, hit Control+Shift+M (or Command+Shift+M if you’re on Mac OS), or go to Web Developer -> Tilt, available in the Firefox application menu (or the Tools menu on Mac OS). You can modify this hotkey (and other properties) from the Options menu after starting Tilt.

Solution 2:

Update: It's been removed from FF 47 onwards, but is available in an add-on.

It seems FF updates might disable this. The icon is now different from the "3D" button in other answers - it's a cube icon. Click the settings cog icon and enable the "3D View" option in the Developer Tools "Available Toolbox Buttons".

Firefox 38 - cube and cog on the right:

Firefox 30 - cog on the left:

Solution 3:

To enable webgl on FF (i.e. 11) go to address "about:config" in browser, put "webgl" in Search box, dblclick (set to True) setting "layers.acceleration.force-enabled"

Solution 4:

Nothing worked for me except this:

• Go to about:config
• 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.

Source: http://techawakening.org/firefox-11-3d-inspect-button-not-working/946/