Just discovered a little-known featured of FireFox… As other browsers, FireFox now includes (without installing extensions) web developer tools, but the one I’m talking about, is inspecting the DOM in 3D !

FireFox web developer tools

As many web developers, I’ve been using FireBug with FireFox for a very long time, since before Chrome existed, since before Opera proposed DragonFly. Even Internet Explorer has such tools now. That’s why I totally missed the recent improvement of FireFox regarding web development tools.

So I just recently discovered this amazing tool. To see it in action, you just have to right click in the page and choose “Inspect element”. FireFox highlights the selected emelent and affiche the DOM path at the bottom of the window. I took the example on an article of this site (the result has been truncated):

You have 3 buttons on the right:

Style and HTML buttons give access to DOM and CSS panels with the kind of features you find in FireBug and other similar tools

DOM in 3D

The 3D view button opens a completely unique tool, that displays the elements of the DOM put in depth according to their position in the DOM tree. This example was made using an article of this site (notice the weird CSS construction on the site logo, partly my bad, partly Drupal or the theme I was using):

Isn’t it beautiful ? You can rotate the view using the mouse, elements can be selected in the 3D view… Nested elements of similar size can now be accessed by direct click.

A little bonus

Did you know that you can put SVG directly in a HTML document ? Since the SVG is built on a tag syntax, it is possible to copy code generated by Inkscape into a web page and get nice vector graphics.
I’ve placed a SVG drawing below (white on white) for this occasion, inspect it in 3D using FireFox to discover the surprise… Remember the time when stereograms were so popular ?

Conclusion

Not so sure about how useful this tool can be, but it sure is a cool toy !