Firefox Adds New Developer Tools and Add-on Sync

Mozilla

86

Firefox for Windows, Mac and Linux adds new in-product developer tools that make it easier to visualize page elements. Firefox also expands Firefox Sync capabilities to let users sync add-ons across computers.

Firefox includes new developer tools that represent the structure of websites in a new way and make it easier to live-edit CSS code. The first is a powerful visual layout tool unique to Firefox, Page Inspector 3D View. Nicknamed Tilt, it is a brand new WebGL-based website visualization tool that highlights the structure of a page better than a flat view, so anyone can immediately 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.

Firefox 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.
It’s a quick and easy way to iterate and test designs on a website. Once changes are made, the Firefox Style Editor provides a simple way to save the file to your computer.

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.

For more information:

86 responses

  1. Pingback from Firefox 11 mit 3D-Ansicht zum Download freigegeben on ::

    [...] Entsprechendes Video aus dem Mozilla-Blog: [...]

  2. Pingback from Has It Been 6 Weeks Already? Firefox 11 Now Available | KindleConnection - UK Kindle Developers, Kindle Fire Developers UK on ::

    [...] The Mozilla Blog has announced the availability of Firefox 11, the organization’s latest and greatest web browser (well, for another six weeks or so, anyway). Available now for Mac, Windows and Linux, Firefox 11 is another chapter in Mozilla’s “baby step” full point releases and most of the changes are under the hood. [...]

  3. Pingback from Firefox Adds New Developer Tools and Add-on Sync on ::

    [...] This is a syndicated post, which originally appeared at The Mozilla Blog. View original post. [...]

  4. Pingback from Mozilla Cranks Firefox to 11 « Investment Watch Blog – 2012 on ::

    [...] the 3D View more clearly illustrates how the parts of a website are structured,” Mozilla stated. “After selecting 3D View in Page Inspector, just hover your mouse over the elements to get [...]

  5. Pingback from Firefox 11.0 Released with CSS Style Editor and Add-on Sync on ::

    [...] / 5 0 votes, 0.00 avg. rating (0% score) The latest version of Firefox 11.0 has been released with some new interesting features for web developers. For long Firefox was always considered the [...]

  6. Pingback from Add-on sync comes to Firefox 11 | Social Media and Tech Tips - Cuhea - Your Social Media Guide on ::

    [...] Add-on sync and two new developer tools are the hallmarks of today’s update to Firefox. [...]

  7. Pingback from Firefox 11 For Windows, Mac OS X & Linux on ::

    [...] to Firefox blog [...]

  8. Pingback from La tercera dimensión llega a la web con Firefox 11 | Numezen on ::

    [...] propiedad de permitir la visualización de cualquier página web  en 3D.Según se explicó en el blog oficial de Mozilla, se trata de una nueva marca basada en la herramienta WebGL de visualización de página  que [...]

  9. Pingback from ChipMiando.Net | la tercera dimension llega con el firefox 11. on ::

    [...] se explicó en el blog oficial de Mozilla, se trata de una nueva marca basada en la herramienta WebGL de visualización de página  que [...]

  10. Pingback from Two weeks of development with Firefox instead of Chrome | chrisadams.me.uk on ::

    [...] Most importantly, there's visible progress with each iteration of the 6 week release cycle, with gaps in the experience being plugged each step of the way. The importer from Chrome is a great example of this now, although inexplicably Mozilla totally failed to mention it on their main blog post about the latest release. [...]

  11. Pingback from This Firefox Goes to 11 | Witty City Blog on ::

    [...] has released Firefox 11, adding some new developer tools, support for the SPDY protocol and the ability to sync your [...]

  12. Pingback from Mozilla launches Firefox 11 and Thunderbird 11 « « on ::

    [...] progressing this week by Mozilla on a company’s central blog, Firefox 11 rolled out to consumers and brought an ascent to the add-on syncing tool. While [...]

  13. Pingback from מדריך: לראות את עולם הווב בתלת מימד עם כלי הפיתוח החדשים של פיירפוקס 11עיצוב גרפי וטכנולוגיה on ::

    [...] חברת מוזילה שחררה לעולם את גרסה 11 של האקס-דפדפן המיתולוגי שלי – פיירפוקס (Firefox). אחד [...]

  14. Pingback from Mozilla launches Firefox 11 and Thunderbird 11 | BiZZBo on ::

    [...] progressing this week by Mozilla on a company’s central blog, Firefox 11 rolled out to consumers and brought an ascent to the add-on syncing tool. While [...]

  15. Pingback from Mozilla launches Firefox 11 and Thunderbird 11 | computerhardwareshop.info on ::

    [...] earlier this week by Mozilla on the company’s official blog, Firefox 11 rolled out to consumers and brought an upgrade to the add-on syncing tool. While [...]

  16. Pingback from Firefox 11 Losing Market Share But Still Thriving - MV.Tech.Blog on ::

    [...] I didn’t notice that Firefox 11 was already out until yesterday so I immediately upgraded to Firefox 11. [...]

  17. Pingback from Firefox 11 с нови екстри :) on ::

    [...] или какво? Не, това си е без разширение. Виж: Firefox Adds New Developer Tools and Add-on Sync | The Mozilla Blog Twin4o 2.0 => Колко уникална е една статия? Кой я е [...]

  18. Pingback from Mozilla Cranks Firefox to 11 | Ivan Drakic on ::

    [...] the 3D View more clearly illustrates how the parts of a website are structured,” Mozilla stated. “After selecting 3D View in Page Inspector, just hover your mouse over the elements to get [...]

  19. Pingback from HostGator Reseller Coupon Code 2012- February to March on ::

    [...] hope you will find the good deals and offers with HostGator Reseller Coupon Code 2012 Page. Thank you! VN:F [1.9.14_1148]please wait…Rating: 9.8/10 (4 votes cast)VN:F [1.9.14_1148]Rating: +2 (from 4 [...]

  20. Pingback from Firefox 11: Novas ferramentas para desenvolvedores | Aprenda Facil Dicas e Tutoriais Gratis on ::

    [...] Firefox 11, finalmente disponível oficialmente. A mais recente versão do navegador Mozilla inclui novas ferramentas para desenvolvedores , extensões e suporte a sincronização de protocolo SPDY [...]

  21. Pingback from Izdan Firefox 11 - Vrilo - Sve vijesti na jednom mjestu on ::

    [...] ocjeneBušlje: Neću nositi štitnik za genitalijeHTC s ICS-om – uskoroMozilla je službeno izdala novu verziju svojeg preglednika Interneta Firefox, brojčane oznake [...]

  22. Pingback from WebGL around the net, 22 March 2012 | Learning WebGL on ::

    [...] The Tilk Firefox plugin, which uses WebGL to display 3D representations of the structure of web pages, is now part of the official built-in Firefox webdev tools! [...]

  23. Pingback from This Firefox Goes to 11 | Paramark Inc. on ::

    [...] has released Firefox 11, adding some new developer tools, support for the SPDY protocol and the ability to sync your [...]

  24. Pingback from For those interested: Seeing the “guts” of a webpage – ITP Core 2 2012 on ::

    [...] so I suggest that if you are interested in seeing what I am talking about, just check out this the video Mozilla posted on their website, explaining the new 3D developer tools - or, if anyone is interested in seeing how I played with it to poke around with some html, I [...]

  25. Pingback from Google Delivers Chrome 18 Browser » Techno Capital on ::

    [...] release of Chrome 18 follows by a couple of weeks the release of Firefox 11. On March 13, Mozilla announced the release of Firefox 11, which adds new in-product developer [...]

  26. Pingback from Google Delivers Chrome 18 Browser – eWeek « « on ::

    [...] release of Chrome 18 follows by a couple of weeks the release of Firefox 11. On March 13, Mozilla announced the release of Firefox 11, which adds new in-product [...]

  27. Pingback from St. Louis Computer and Technology News » Google releases Chrome 18 following Firefox’s 11 browser. – St. Louis Computer and Technology News » St. Louis Computer and Technology News on ::

    [...] 18’s release follows the recent release of Firefox 11.  Mozilla announced the release of Firefox 11, which adds new in-product developer tools that make [...]

  28. Pingback from 3D DOM Element Inspector in Firefox — Web Design — Konstruktors on ::

    [...] new 3D DOM inspector in Firefox is simply amazing. Just look at those skyscrapers of the social share buttons — Twitter and [...]

  29. Pingback from 3D HTML/CSS debugging · Big Ideas by Jezen Thomas on ::

    [...] of my ex-colleagues introduced me to Mozilla’s 3D View Page Inspector last year, before it was implemented into FireFox core. At the time it seemed very cool, but also a [...]

  30. Pingback from main magazine » Blog Archive » Un mapa 3D de cualquier web con Firefox on ::

    [...] los desarrolladores solían confiar en extensiones de terceros como Web Developer Toolbar, pero desde la versión 11 nos ofrece una nueva forma de ver la plantilla de cualquier web: en [...]

  31. Pingback from Un mapa 3D de cualquier web con Firefox « Francisco Unica on ::

    [...] los desarrolladores solían confiar en extensiones de terceros como Web Developer Toolbar, pero desde la versión 11 nos ofrece una nueva forma de ver la plantilla de cualquier web: en [...]

  32. Pingback from Un mapa 3D de cualquier web con Firefox « enbolivia.com srl. on ::

    [...] los desarrolladores solían confiar en extensiones de terceros como Web Developer Toolbar, pero desde la versión 11 nos ofrece una nueva forma de ver la plantilla de cualquier web: en 3D. Share [...]

  33. Pingback from Un mapa 3D de cualquier web con Firefox | Conocimiento Colectivo! on ::

    [...] los desarrolladores solían confiar en extensiones de terceros como Web Developer Toolbar, pero desde la versión 11 nos ofrece una nueva forma de ver la plantilla de cualquier web: en [...]

  34. Pingback from Launch Your Products Like the Gurus with PlumSocial Launch Pad on ::

    [...] Launches Polling Product!Bath-Knight BlogBack-to-School With a Little More Money in Your PocketFirefox Adds New Developer Tools and Add-on Sync body {background: none [...]

  35. Trackback from Pozycjonowanie... on ::

    Pozycjonowanie…

    Firefox Adds New Developer Tools and Add-on Sync | The Mozilla Blog…

  36. Trackback from read this... on ::

    read this…

    Firefox Adds New Developer Tools and Add-on Sync | The Mozilla Blog…

  37. Trackback from Read The Full Post... on ::

    Read The Full Post…

    Firefox Adds New Developer Tools and Add-on Sync | The Mozilla Blog…

More comments: 1 2

Comments are closed, but trackbacks are open.