Channels ▼
RSS

Tools

Firefox Page Inspector 3D View Opens Up HTML


Mozilla has been nothing if not a little over communicative with regard to Firefox browser updates, which appear to have been emerging on an almost weekly basis as of late. But news this week may be more substantial, in developer terms at least, as new in-product developer tools have emerged designed to make it easier to visualize page elements with a 3D view of HTML elements in a website.

Compatible with Firefox for Windows, Mac, and Linux, the new developer options represent the structure of websites in a new way and make it easier to live-edit CSS code. Along with this news, Firefox has also benefitted from expanded Firefox Sync capabilities to let users sync add-ons across computers.

According to Mozilla, this visual layout tool is "unique" to Firefox. Page Inspector 3D View (nicknamed Tilt) is a WebGL-based website visualization tool that highlights the structure of a page better than a flat view, so web developers can understand the relationship of the code to the page output.

"While developer tools like 'view source' have always been useful to learn about how to develop a page, the 3D View more clearly illustrates how the parts of a website are structured. After selecting '3D' View in Page Inspector, just hover your mouse over the elements to get more information about each piece you select," said Mozilla.

Firefox also now includes the new Style Editor tool, which allows developers to edit CSS stylesheets like a text editor and see changes instantly, entirely within the browser. 
Once changes are made, the Firefox Style Editor provides a way to save the file to a user's computer.


Lastly, Firefox introduces Add-on Sync. Users now have the option to sync add-ons between computers to allow for a seamless experience across Firefox at work and at home. Users can enable this feature in the Preferences window on the Sync tab.


Related Reading


More Insights






Currently we allow the following HTML tags in comments:

Single tags

These tags can be used alone and don't need an ending tag.

<br> Defines a single line break

<hr> Defines a horizontal line

Matching tags

These require an ending tag - e.g. <i>italic text</i>

<a> Defines an anchor

<b> Defines bold text

<big> Defines big text

<blockquote> Defines a long quotation

<caption> Defines a table caption

<cite> Defines a citation

<code> Defines computer code text

<em> Defines emphasized text

<fieldset> Defines a border around elements in a form

<h1> This is heading 1

<h2> This is heading 2

<h3> This is heading 3

<h4> This is heading 4

<h5> This is heading 5

<h6> This is heading 6

<i> Defines italic text

<p> Defines a paragraph

<pre> Defines preformatted text

<q> Defines a short quotation

<samp> Defines sample computer code text

<small> Defines small text

<span> Defines a section in a document

<s> Defines strikethrough text

<strike> Defines strikethrough text

<strong> Defines strong text

<sub> Defines subscripted text

<sup> Defines superscripted text

<u> Defines underlined text

Dr. Dobb's encourages readers to engage in spirited, healthy debate, including taking us to task. However, Dr. Dobb's moderates all comments posted to our site, and reserves the right to modify or remove any content that it determines to be derogatory, offensive, inflammatory, vulgar, irrelevant/off-topic, racist or obvious marketing or spam. Dr. Dobb's further reserves the right to disable the profile of any commenter participating in said activities.

 
Disqus Tips To upload an avatar photo, first complete your Disqus profile. | View the list of supported HTML tags you can use to style comments. | Please read our commenting policy.
 

Video