SEARCH

How-To Geek

How to Use Firefox’s Web Developer Tools to View Website Structures in 3D

firefox dev header

Firefox 11 added two new web developer tools to Firefox’s already impressive arsenal. The Tilt feature visualizes website structures in 3D, while the Style Editor can edit CSS stylesheets on the fly.

The 3D feature, known as Tilt, is a way of visualizing a website’s DOM. It integrates with the existing Document Inspector and uses WebGL to display rich 3D graphics in your browser.

Tilt – 3D Website Visualization

You can access Tilt from within Firefox’s Page Inspector. To get started, open the Page Inspector by selecting “Inspect” from the Web Developer menu. You can also right-click in the current page and select “Inspect Element” to start the inspector at a specific element.

sshot-1

Click the “3D” button on the inspector toolbar.

sshot-2

You’ll see the page’s structure after activating 3D mode, but it will look flat until you rotate it.

sshot-3

Rotate the model by left-clicking, move the image around by right-clicking, and zoom in and out using the mouse wheel.sshot-4

This view is integrated with the other tools in the inspector. If you have the HTML or Style panels open, you can click an element on hte page to view that element’S HTML code or CSS properties.

sshot-5

More 3D Features

The 3D visualization feature was based off the Tilt extension, but it doesn’t have all the features of the Tilt extension. if you want to customize the colors or even export the visualization as a 3D model file for use with a 3D editing program, you’ll need to install the Tilt 3D add-on. Once you have, you’ll get a new “Tilt” option in the Web Developer menu.

sshot-6

Click the Cancel button to use the old version of Tilt when prompted.

sshot-7

You’ll find controls to customize the visualization at the left side of the window and other options, including the export feature, at the top of the page.

sshot-8

CSS Style Editor

To view and edit a page’s CSS style sheets, open the Style Editor from the Web Developer menu.

sshot-9

The Style editor lists the stylesheets on the current page. Toggle a stylesheet on or off by clicking the eye icon to the left of the stylesheet’s name. Edit a stylesheet by selecting it and modifying the code.

sshot-10

Changes are reflected on the page immediately. If you toggle a stylesheet off, the page will lose its style information. If you edit a stylesheet, you’ll see the edits appear on the page while you type.

sshot-11

You can save a copy of one of the stylesheets to your computer, import an existing stylesheet from your computer, or add a new, blank stylesheet with the Save, Import, or New links in the Style Editor window.


The 3D visualization feature watches for changes on the current page and notices when changes occur. When you use the Style Editor with the 3D inspector open, your changes will be reflected immediately in the 3D view. This also works with third-party extensions that modify web pages, such as Firebug.

Chris Hoffman is a technology writer and all-around computer geek. He's as at home using the Linux terminal as he is digging into the Windows registry. Connect with him on Google+.

  • Published 03/20/12

Comments (26)

  1. patrick

    Is the 3D function only available on W7? I have FF11 beta installed but the 3D button is not available in the Page Inspector?

  2. Santo

    I don’t see the 3D button in Firefox 11 installed in my Win 7 PC.

  3. penguin1337

    i don’t see it too… even if i install the Tilt 3D addon.
    My FF Built:
    Build identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:11.0) Gecko/20100101 Firefox/11.0

  4. whodan

    Works running under Linux Mint 12 KDE.

  5. soloman498

    Man that is so cool.Works a treat on my w7

  6. megageektutorials

    I have a pretty junk computer and this works with no lag at all! This is just awesome!

  7. Paul

    Just a quick tip: I have seen numerous posts asking what the 3d function does for a web developer. I can’t answer as a web developer, but as a security reasearcher I have found the 3D function to be invaluable to identify clickjacking schemes and embedded Iframes. The 3d visualization allows me to see underlying components and identify the malicious components in a way like never before.

  8. AlanWade

    Works fine on my Win 7 and on my Win 8.

  9. Phil Whisenant

    I have a simple question that I assume that many others have already asked! Does the Tilt 3D Add On work only with Windows 7 and 8? I am pretty sure it would not operate using XP.

  10. Kevin Dangoor

    If you don’t see the 3D button, you likely have a blocklisted driver… a graphics driver update may be all you need!

    https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers

  11. André Ferreira

    Tilt is a firefox add-on.

    You can check it here:
    https://addons.mozilla.org/en-US/firefox/addon/tilt/

  12. orion

    no one has answered us; how do we get the 3d button in the page
    inspect

  13. Joe

    Fantastic! However, using Vista, the 3D button does not come up.

  14. Greg Long

    It was the video driver that was preventing me from seeing the 3D button. Updated the driver, and the button appeared! Thanks, Kevin, for the info.

  15. Rod

    You can access it in two ways. Right click on the page, Inspect Element (O), and on the bottom you’ll see the DOM path to the element you right clicked, and on the right you should see ‘3D’ ‘HTML’ ‘Style’. Or you could click on the orange ‘Firefox’ button on the top left, Web Developer, Inspect

  16. NotANoob

    The author of this piece claims to be a technology writer. Maybe so, but he seems to lack a basic journalistic standard is you have to connect with the readers for an article to be successful. With the number of complaints one can read here, clearly he has failed the Prime Directive. It wasn’t until I read the comments did I see I have to check my hardware capabilities FIRST, followed by whatever addons might be necessary.

    Also if I disable the images in the article, the text doesn’t carry the load. I guess the writer missed that one, too. So much for many who like clear information.

  17. Mike

    @NotANoob
    Get over it. If you’re reading an artical regarding a 3D DOM inspector built into Firefox 11 then i’m pretty sure you have the ability to read the artical with images enabled.

  18. Chris Hoffman

    @NotANoob

    Sorry, I wasn’t aware blacklisted drivers were such a problem. Anything 3D needs the appropriate hardware and drivers to function properly. Perhaps I should have mentioned that in the post, but no one’s perfect.

    And yes, the text may not “carry the load.” A picture is worth a thousand words, as they say. With so many pictures, I didn’t want to waste readers’ time by repeating things they can clearly see in screenshots.

  19. Sabrina

    Nice Article!!!
    Good to know about theHow to Use Firefox’s Web Developer Tools to View Website Structures in 3D

  20. hanzie

    @Chris Hoffman

    Thank you very much. I’m about to get back into web work after several years out, and this looks quite useful. Thanks again!

  21. Darryl

    I mistakenly clicked on the option to use the native version of the tilt dev tool, and now don’t have the option to export as a 3D file. I tried un-installing and re-installing the add-on, but FF 11 keeps using the native Tilt. Is there anyway of disabling the native titl and going back to using the Add-on version? Of course, I also clicked the don’t show this message again tab, so don’t have the menu to go back to the old version. Any help gratefully appreciated!

  22. Nicklas

    Holy shit! That was a really unexpected feature, i like it a lot. So fun to play with! Actually, the entire inspector is really well made and it just looks really good. Now i’ll just have to wait for Chrome to polish their stuff, i’m tired of switching browsers! Thanks for the article.

  23. Chris Hoffman

    @Darryl

    Options like this are usually stored in about:config.

    Try plugging about:config into your address bar, then searching for “tilt” on the about:config page.

    Try toggling the “extensions.tilt.options.nativeTiltHello” option or the “extensions.tilt.options.hideUserInterfaceAtInit” option. Both look promising!

  24. r

    wow, very cool…I can spin it like a coin & read everything backwards now.

  25. Shulk

    It seems to work only on 32bits OS and not on 64bits, am I right?

  26. Chris Hoffman

    @Shulk

    I’m not sure about that — I think it’s just graphics driver dependent.

Enter Your Email Here to Get Access for Free:

Go check your email!