I can't seem to make out this little feature that was once there in Firefox.
The 3D button that was there in an earlier version of the dev tools is gone and I can't seem to find any trace of this feature anywhere. If it's still there, how do I enable it?
28 Answers
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.
Tilt 3D IS Not compatible with Firefox Quantum.
8Up until Firefox version 47: If you right click and select "Inspect Element" and then click the gear icon at the left hand side of the toolbox menu you should see "Available Toolbox Buttons" under which appears "3D View".
Clicking this will add a new icon to the toolbox menu that when clicked will show the 3D Dom view.
Goto: Preferences->General Uncheck "Enable multi-process Firefox Developer Edition"
Restart Firefox
Goto: Developer tool bar [Tool Box Options], "3D View" check box should now show under "Available Toolbox Buttons", make sure this is checked and you are good.
1I know this question is in regards to FireFox, but you can get this feature in Chrome as well (Firefox won't let you insert JS as a bookmark):
Add this javascript code as a bookmark url:
javascript:void function(b,p)%7Bfunction l(k,c,b,e,g,d,f)%7Breturn"<div style%3D%27position:absolute%3B-webkit-transform-origin: 0 0 0%3B"%2B("background:"%2Bf%2B"%3B")%2B("width:"%2Be%2B"px%3B height:"%2Bg%2B"px%3B")%2B("-webkit-transform:"%2B("translate3d("%2Bk%2B"px,"%2Bc%2B"px,"%2Bb%2B"px)")%2B("rotateX(270deg) rotateY("%2Bd%2B"deg)")%2B"%3B")%2B"%27></div>"%7Dfunction o(k,c,d,f)%7Bfor(var j%3Dk.childNodes,n%3Dj.length,m%3D0%3Bm<n%3Bm%2B%2B)%7Bvar a%3Dj%5Bm%5D%3Bif(1%3D%3D%3Da.nodeType)%7Ba.style.overflow%3D"visible"%3Ba.style.WebkitTransformStyle%3D"preserve-3d"%3Ba.style.WebkitTransform%3D"translateZ("%2B(b%2B(n-m)*q).toFixed(3)%2B"px)"%3Bvar h%3Dd,i%3Df%3Ba.offsetParent%3D%3D%3Dk%26%26(h%2B%3Dk.offsetLeft,i%2B%3Dk.offsetTop)%3Bo(a,c%2B1,h,i)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop,(c%2B1)*b,a.offsetWidth,b,0,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft%2Ba.offsetWidth,i%2Ba.offsetTop,(c%2B1)*b,a.offsetHeight,b,270,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop%2Ba.offsetHeight,(c%2B1)*b,a.offsetWidth,b,0,g%5Bc%25(g.length-1)%5D)%3Be%2B%3Dl(h%2Ba.offsetLeft,i%2Ba.offsetTop,(c%2B1)*b,a.offsetHeight,b,270,g%5Bc%25(g.length-1)%5D)%7D%7D%7Dvar g%3D"%23C33,%23ea4c88,%23663399,%230066cc,%23669900,%23ffcc33,%23ff9900,%23996633".split(","),q%3D0.001,e%3D"",d%3Ddocument.body%3Bd.style.overflow%3D"visible"%3Bd.style.WebkitTransformStyle%3D"preserve-3d"%3Bd.style.WebkitPerspective%3Dp%3Bvar r%3D().toFixed(2),s%3D().toFixed(2)%3Bd.style.WebkitPerspectiveOrigin%3Dd.style.WebkitTransformOrigin%3Dr%2B"px "%2Bs%2B"px"%3Bo(d,0,0,0)%3Bvar f%3Ddocument.createElement("DIV")%3Bf.style.display%3D"none"%3Bf.style.position%3D"absolute"%3Bf.style.top%3D0%3Bf.innerHTML%3De%3Bd.appendChild(f)%3Bvar j%3D"NO_FACES"%3Bdocument.addEventListener("mousemove",function(b)%7Bif("DISABLED"!%3D%3Dj)%7Bvar c%(360*()-180).toFixed(2),c%3D(360*c-180).toFixed(2)%3Bd.style.WebkitTransform%3D"rotateX("%2Bb%2B"deg) rotateY("%2Bc%2B"deg)"%7D%7D,!0)%3Bdocument.addEventListener("mouseup",function()%7Bswitch(j)%7Bcase "NO_FACES":j%3D"FACES"%3Bf.style.display%3D""%3Bbreak%3Bcase "FACES":j%3D"NO_FACES",f.style.display%3D"none"%7D%7D,!0)%7D(25,5E3)%3BOnce added click the bookmark on any website. You can click to show outlines and drag to view like in Firefox.
2Update: It's been removed from FF 47 onwards, but is available in an add-on.
It seems FF updates might disable this. FF 38 has changed the settings icon location.
Firefox 38 - cube and cog on the right:
Firefox 46.0 still can be downloaded here :
And Tilt 3D module here (from Firefox 46.0) :
Render view seems better with Tilt 3D than with native 3D View from Web Developer Tools :
Screenshot comparison between Tilt 3D and 3D View
1Have a look at Microsofts Edge Browser.
I have version Version 79.0.283.0 (Official build) canary (64-bit). Put edge://flags/ in the address bar and enable Developer Tools experiments. Open the developer tools and press Control+Shift+P and search Experiments and find Enable DOM 3D view.
Now you can use Ctrl+Shift+P > DOM 3D View.
It's not a Firefox solution but it worked for me.
I found out about it here.
It's gone after version 46. A solution to this is to Google "Firefox 46 download" Install that version and rename it (on Mac) to something like firefox-45 to keep the updated version as well. Launch version 45 and turn automatic updates off. You can now enable the 3D view and see the page in 3D and tilt it.
Hope that works for you.
