

Firefox 3D view - arunabh
https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/3D_view

======
dangoor
Here's the blog post in which I introduced the feature...

[http://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-
dev...](http://blog.mozilla.org/blog/2012/03/13/firefox-adds-new-developer-
tools-and-add-on-sync/)

The 3D view is not "every day" useful, but people have found it to be a quick
way to spot unexpected nesting issues.

As noted elsewhere, this feature started life as an add-on made during Google
Summer of Code 2011 by Victor Porof, who continues to work on Firefox
developer tools today.

(in case you hadn't guessed, I work for Mozilla... usual biases therefore
apply ;)

~~~
Andrex
It's apparently very useful for discovering some nasty XSS bugs. I think
eventually, this might be one of the "last stops" in testing new front-end
designs; a staple, but not something you need to be switching into every five
minutes (unless there's something to be fixed.)

Very jealous of this as a Chrome user. :) Good job guys.

------
bretthopper
2010:

"Check out this site. Design is awesome."

"Yeah but did you view source? Terrible semantics and inline css."

2012:

"Check out this site. Design is awesome."

"Yeah but did use 3D View? The element stacking is terrible. Doesn't have
those nice symmetrical pyramids you like to see."

~~~
sopooneo
I am a bit baffled by the switch from your 2010 scenario myself. Many people
were obsessed with semantic markup, but now things like bootstrap.css come
along that _clearly_ violate that idea and I don't hear a peep about it.

Some people reconcile it by saying bootstrap is (as the name implies) just for
getting things up and running and once your site is stable you should switch
to better markup. But I don't think anyone actually does that.

------
0x0
This post has a nice writeup on how this 3D view helped find an XSS
vulnerability in a webapp:
[http://drewgoodwin.com/posts/2012/07/17/firefox-3d-view-
help...](http://drewgoodwin.com/posts/2012/07/17/firefox-3d-view-helps-spot-
xss-vulnerabilities/)

------
bprater
Cool. To see it, turn on inspector (right-click page, inspect element) and on
the info bar at the bottom is a "3D View" button. Try both mouse buttons and
the mouse wheel.

Too bad they didn't put some inertia in it, it would be fun to flick around
the webpage.

------
highace
"This content covers features introduced in Firefox 11"

We're now on Firefox 14. It's reasonably old.

~~~
freditup
It has been out for awhile, but it seems like a lot of people weren't aware of
the feature. One additional usage - introduce non-programmers/web designers to
what is really behind what they see on a webpage. Most people find the 3D view
pretty cool, no matter if they're a technical person or not. It's also been
great to see the FF developer tools improve so much recently.

------
seanmcdirmid
In a similar spirit, I wrote a crumpled paper web browser around an IE
instance in WPF once:
[http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-w...](http://blogs.msdn.com/b/sean_mcdirmid/archive/2009/07/27/a-web-
browser-suitable-for-harry-potter-in-wpf.aspx)

Not very useful, but a cool effect. Life is much better when we can host web
browser instances as textures. Geometry (as in this case) would allow for even
better effects; I feel bad that I never thought of that!

------
trinary
It's been around as an addon for a while, I think it was put into FF at
version 11 (March 2012). I really think it should have remained as an
extension, it looks neat but is pretty useless.

~~~
dbaupp
It's not entirely useless: I think it at least could be used to provide
beginners with some feeling/visualisation for how layout of a webpage works.

------
wangweij
I opened a long page, tilted a little, reached the end, and pressed the down
button to scroll the page up. Heavens! It's like watching the first scene of
Star Wars.

------
AshleysBrain
"Use cases ... it looks __awesome __". Heh.

~~~
sergiotapia
There's another thread on HN that shows it can be used to spot XSS
vulnerabilities.

------
v33ra
finally, you can see what's behind each website!

<http://i.imgur.com/PiNtn.png>

~~~
jbottigliero
I actually toyed around with this when it was first announced, sometimes the
results are quite unique.

Check out this screenshot from cityofchicago.org, the 3D DOM looks strikingly
similar to the Willis (Sears) Tower...

<http://i.imgur.com/udact.png>

[edit] Looking back, it's just the "G+" feature on any page...

------
twelvechairs
Nice feature but poor UI (controls) for me. Zoom (mousewheel) and rotate (left
click) should take place around the cursor (or the 3d space it is currently
hovering over) rather than the centre of the screen. Makes things much easier
for the user (especially the power-user, who this is aimed at and can spare
the 30-seconds to figure out how it works).

As an extra, clicking the mousewheel down should allow you to 'pan' (rather
than 'rotate' on mouse1)...

Would make things much nicer...

~~~
brudgers
A click, rather than the mouse pointer, is useful for setting the center of
rotation in 3d views...I prefer middle button (scroll wheel) click.

------
itsbits
this has been around for a while now...

------
zarify
I was all ready to say "What the hell are people still talking about 3D web
browsers for?", but that's actually kind of neat.

------
neel8986
Go to facebook page and try it. It is almost like Manhattan in 3d

------
redact207
i use something similar for WPF called Snoop. these types of things are also
useful when you're trying to see the complexity or optimize the nesting levels
of your controls.

------
euroclydon
If I had a fast enough machine, I'd like to capture some zooming, panning and
rotating of my SVG based application for a schnazzy eye-candy video.

------
Trezoid
Oddly enough, I've actually used this exactly once. If you've got phantom
elements sitting over something it can be quite useful to visualize them

------
jofo25
Are you still able to interact with the document whilst in 3d mode? e.g. test
jQuery animations, etc (unfortunately can't try it myself)

~~~
achal
You cannot, unfortunately. I tried simply animating some elements with
.animate, and it did not work.

------
jastr
As someone who teaches intro to HTML classes, 3D view is a cool way to explain
divs, spans, etc.

------
johnny_reilly
Does anyone know if Chrome are planning to follow suit?

~~~
arunabh
<http://www.google.com/intl/en/landing/chrome/cadie/>

------
BaconJuice
can someone tell me how to get this to actually work? I'm on firefox 15 and I
don't see this feature?

~~~
achal
You have to open the inspector first (Ctrl+Shift+I or Firefox->Web
Developer->Inspector), and then click the "3D" button on the bottom left (or
bottom right if you're on some beta/nightlies).

~~~
mchahn
Unfortunately it requires webgl which I don't have on any pc. I couldn't find
any easy way to install it.

~~~
achal
Check `about:support` and see if webgl was disabled because of the driver
version. That might be it.

------
kivo
it's not new? that's why i'm using firefox as a developer. It is awesome!

------
detay
Utterly useless.

------
hastur
old news

still, pretty cool

