Skip to content

See web pages in 3D with Firefox

July 23, 2013

tilt Kaneb home

For many years browsers have included tools that let you view the “source” of a web page – the HTML and CSS code that make everything happen. Firefox now has a 3D View that visualizes the structure of a web page. Right-click a spot on a web page [Control-click on a Mac] and choose “Inspect Element” to begin displaying the code. Then click the cube icon at the right end of the developer toolbar to see a 3D view.

tilt icon

This is also called “Tilt” mode, because you can click and drag to change the angle of view it in any way you like. Besides just being cool and fun to play with, Tilt can help coders find problems like unclosed DIV elements or items that are somehow rendering outside the visible area of a page. Clicking a spot on the visualization highlights the corresponding code. Stacks of elements represent nested items, which you can inspect layer by layer. There are details at the Mozilla Developer Network site.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s