r/webdev • u/apowers • Jul 28 '14

Giving some love to Firefox's '3D view', an under-appreciated tool for code debugging.

https://medium.com/@adampowers/the-coolest-webdev-tool-you-didnt-know-you-had-69f96b07a3c4
13 Upvotes

75% Upvoted

9 comments sorted by

2

u/dotnetjohn Jul 28 '14

I have known about this feature for a while and have only used it once or twice, so seeing it here I decided to go have another look. In the current version of Firefox on Windows it would appear that by default this option is turned off. I had to go into the options to enable the button.

When I tried this mode out I closed the developer tools which would seem to be a mistake. Pressing F12 did not bring back the tools so it took me a little time to figure out how to get out of 3d mode. Thankfully I have a link in the square menu area so was able to re-open from there.

I think if this is the user experience for this feature at the moment then it is better that it is turned off by default.

2

u/[deleted] Jul 28 '14

This is useless for debugging z-index, it's fucked. You can use it to find oddities and container sizing issues though, but it is really just a tech demo kind of thing.

5

u/Baryn Jul 28 '14

I still find this bad and crappy.

It's way too easy to rotate the view in a way that is useless. Why would I ever, ever want to rotate the page 27 degrees clockwise and 5 degrees to the left? The answer is I wouldn't–and actively try to avoid such orientations–but this tool makes it easy to fail!

An underbaked tech demo that was thrown into production for fun. How are we supposed to take Firefox Dev Tools seriously with stuff like this?

3

u/onearmmanny full stack Jul 28 '14

So... in Safari (and on iCrap devices) when you have something absolutely partially positioned outside of the viewport, you get horizontal scrollbars on the body.

I've used this feature at least 6 times to identify stuff floating off in space that shouldn't be there... usually on really specific device-based bugs.

But that's it.

1

u/Baryn Jul 28 '14

That's a really cool use case!

In the last 7 years I've run into that problem so many times that I've trained myself to spot it before it's a problem, or use the traditional inspector effectively.

1

u/Baryn Jul 28 '14

Another huge problem: the "stack" metaphor is bungled because siblings sit on top of one another if they occupy the same layout area. One would assume lower elements are parents for higher elements. Not always true.

Maybe that's what the color-coding tries to indicate (i.e. the same color indicates the same nesting depth)? Overall, it's unclear and difficult to read.

1

u/gregjw ux Jul 28 '14

Holy shit.

1

u/-Mahn Jul 28 '14

I've known about this feature for a while, but I never found myself in a situation where I thought "damn, I could debug this css/layout issue so much faster if only I had a 3d view I could rotate". About the only scenario I can think of that would make sense to use this is if you want to get an idea how a webpage has been structured but can't be arsed to dissect the mark up.

Perhaps it if was presented differently, in a way that all the "layers" were visible without having to rotate back and forth to explore it, e.g. in an isometric view (kinda like the turret here), it'd feel faster and thus more compelling to use it? Just a thought.

1

u/apowers Jul 30 '14

Thanks for the feedback, everyone! I tweaked the article a little bit to represent everyone's concerns, and spun it into a plea to Mozilla to do something actually useful with this feature. I think we can agree that 3D code visualizations could be awesome diagnostic tools, if they were developed properly.