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

25

6

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

Fire-Dragon-DoL

Posted 2012-03-15T11:58:58.897

Reputation: 631

Answers

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.

Der Hochstapler

Posted 2012-03-15T11:58:58.897

Reputation: 77 228

The hotkeys, button appearance, and button availability have all changed. See Nick Westgate's answer. – Noumenon – 2015-07-24T22:49:47.740

Don't forget that 3D views don't work on e10s/electrolysis/multiprocess windows. – Florrie – 2015-10-24T13:12:45.957

Thanks!!! In the Italian localization is a bit hard to understand that the 3D view is in that function!!! Is beautiful – Fire-Dragon-DoL – 2012-03-15T12:14:06.637

1I don't have the 3D button. – janosrusiczki – 2012-03-20T16:09:53.517

@kitsched I would assume it requires WebGL support or something similar. You could open a new question and see if someone knows. – Der Hochstapler – 2012-03-20T16:14:42.917

3I 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. – Captain Sensible – 2012-03-20T22:18:37.660

1As 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 – 2012-03-27T09:19:51.417

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

Nick Westgate

Posted 2012-03-15T11:58:58.897

Reputation: 1 677

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 – 2015-10-13T17:13:09.610

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: https://developer.mozilla.org/en-US/docs/Tools/3D_View

– Nick Westgate – 2016-09-13T21:53:25.950

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 – 2016-09-13T22:09:15.683

1Indeed, 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. – Nick Westgate – 2016-09-13T22:46:05.810

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"

Uncle Bob

Posted 2012-03-15T11:58:58.897

Reputation: 21

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?)

T.Todua

Posted 2012-03-15T11:58:58.897

Reputation: 2 436

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

mauron85

Posted 2012-03-15T11:58:58.897

Reputation: 111

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/

bancer

Posted 2012-03-15T11:58:58.897

Reputation: 57

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

William Price

Posted 2012-03-15T11:58:58.897

Reputation: 130

Yes, this helped a lot! – Florrie – 2015-10-24T13:18:59.807

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

Facundo Colombier

Posted 2012-03-15T11:58:58.897

Reputation: 171

UGH! Are they going to bring it back? – Fire-Dragon-DoL – 2016-02-04T07:25:03.983

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/

goamn

Posted 2012-03-15T11:58:58.897

Reputation: 138