26

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

9 Answers 9

17

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.

7
  • Thanks!!! In the Italian localization is a bit hard to understand that the 3D view is in that function!!! Is beautiful Mar 15, 2012 at 12:14
  • 1
    I don't have the 3D button. Mar 20, 2012 at 16:09
  • @kitsched I would assume it requires WebGL support or something similar. You could open a new question and see if someone knows. Mar 20, 2012 at 16:14
  • 3
    I cannot for the life of me find the 3D button. It simply isn't there! I have installed FF11 on three different computers with the exact same result! All I can see is the HTML and Style buttons. Mar 20, 2012 at 22:18
  • 1
    As Oliver Salzburg mentions, go to get.webgl.org and see what it says. In my case it said that WebGL is disabled on my system.
    – ShankarG
    Mar 27, 2012 at 9:19
23

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

4
  • I understand that the post asks for Firefox 11, but we are in 2015, Firefox 41, and this is the answer for anyone looking in modern times (Keeping the FF11 answer is no longer general help and now user specific to a small niche)
    – BillyNair
    Oct 13, 2015 at 17:13
  • 2
    Now it's 2016, and in Firefox 47 onwards the 3D feature is no longer built in. But it is available as a plugin: developer.mozilla.org/en-US/docs/Tools/3D_View Sep 13, 2016 at 21:53
  • Funny, I was just looking for this again yesterday... Why do they want to get rid of this?!? It is one of the most useful web development tools out right now! If you have a DIV doing something weird, this is WAY easier than 2D to see where it belongs in the DOM
    – BillyNair
    Sep 13, 2016 at 22:09
  • 1
    Indeed, just like they removed tab groups. And the plugin hasn't been updated since 2011, so who knows if it still works or for how long. Sep 13, 2016 at 22:46
2

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"

1

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/

1

I had the problem where the 3D view button appeared for chrome-only tabs (e.g. about:config) but was not accessible on normal content tabs. At first I thought that my graphics driver had been blacklisted, but fiddling with the about:config options listed in other answers here did not change this behavior.

It turns out that, at the time of writing this answer (13 Nov 2014), the Nightly builds of Firefox do not show the 3D view option on content tabs when running with Electrolysis (e10s, multi-process) enabled. Mozilla bug 937166 tracks the work necessary to make the 3D view remotable across the content processes.

As a workaround, disable the multi-process mode from the General tab in the browser preferences:

'General' tab of Firefox (Nightly) preferences window, showing the 'Enable E10S' checkbox

1
  • Yes, this helped a lot!
    – Nebula
    Oct 24, 2015 at 13:18
1

From Firefox 47 onwards, built-in 3D view is no longer available.

There is an add-on that offers the same functionality: Tilt 3D.

Note: just like the built-in version, the add-on does not work in multiprocess Firefox.

(source: Does Firefox still have the 3D DOM viewer?)

1

To workaround 3D view is not available in multiprocess Firefox you have to disable multi process (formerly known as Electrolysis or E10s).

There is no option in settings to disable Enable E10s (multi process) starting Firefox v52.

But multi process can still be disabled in about:config with option browser.tabs.remote.autostart set to false

enter image description here

After setting to false you need to restart Firefox.

You can also check if multi process was disabled in about:support

enter image description here

0

I'm on Firefox 20 and I could the message "could not initialize tilt". I updated firefox then created a new variable in about:config called "webgl.enabled_for_all_sites", set it to true, and it worked! source of help: http://www.nextofwindows.com/how-to-enable-webgl-in-firefox-chrome-and-safari/

0

Note: 3D view is not available in multiprocess Firefox. This includes the current Nightly and Developer Edition versions of Firefox.

https://developer.mozilla.org/en-US/docs/Tools/3D_View

1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .