The Coolest Webdev Tool You Didn’t Know You Had
Giving some love to an under-appreciated (and under-developed) code visualization
Front-end development can be a messy, tedious affair. Even with the all-singing, all-dancing modern workflow that live-reloads, preprocesses, lints, and phones for a pizza when it detects your blood sugar dropping, a big part of building websites is, well, building websites. Which means writing CSS and watching the browser chuckle, like those media depictions of the Devil as a slick, wish-granting lawyer who totally understands what you want, but cleverly misinterprets your request by giving you exactly what you asked for.
Of course, that’s why most of us can’t live without our DOM inspectors, like Firebug or Chrome’s built-in development tools. In fact, most devs I know prefer one of those two, foregoing Firefox’s built-in tools in favor of Firebug’s more extensive feature set.
However, there’s a feature in Firefox’s regular ‘ol Page Inspector that I personally find unrivaled in the other tools, useful in a variety of situations, and just plain cool: 3D view.
Introduced “way” back in 2012, nestled in a corner of the Page Inspector pane and with an icon unbefitting how totally rad it is, 3D view turns the current page into a layered, three-dimensional model that uses WebGL to let you rotate, scale, and generally get all up in that <div>’s business. Since an HTML document is essentially layered anyway, presenting it as such makes a lot of intuitive sense when trying to debug layout issues. (And it’s way better than setting border: 1px solid red on everything.)
Give it a try right now, if you’re not on mobile. (You might need to activate it first, under Settings > Available Toolbox buttons, located in the gear menu seen on the screenshot above.)
You can use left-click drag to rotate, right-click drag to pan, and scroll to zoom in and out, flying through the DOM like a W3C-compliant Neo. When you click on a layer, it highlights and inspects the corresponding element. (You can even spin the model completely around, to look at it from the other side, and pretend you’re trapped inside the HTML itself.)
You might have known this feature existed for awhile, and dismissed it as a gimmick, just as I did the first several times I ran across it. And admittedly, it’s not perfect, feeling more like a tech demo at times than a thought-out diagnostic tool (a criticism supported by its recent status as an opt-in feature).
But I think the central concept, of representing code in more than two dimensions, is an incredibly powerful idea that will start to gain more traction soon, and I find it interesting that such an experimental tool exists built into one of the world’s most popular browsers. Mozilla, if you’re listening: develop this further, and make it genuinely useful.
And next time you’re debugging container sizing or click area issues, trying to figure out exactly which of many nested <div> tags is contributing a particular background color, or tracking down where that menu just flew off to, give it a try. And don’t forget to make whooosh noises while you do.
Update: it looks like this feature hasn’t made it into recent versions of Firefox, but a
