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

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 38

Firefox 30 - cog on the left:

Firefox 30


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

enter image description here

Now, pick an element on the page (optional):
enter image description here

By clicking the 3D button, you'll get the desired 3D view: enter image description here

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.


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"

Tags:

Firefox

3D