Engagement/Developer Engagement/Grab bag: Difference between revisions

Jump to navigation Jump to search

Engagement/Developer Engagement/Grab bag (view source)

Revision as of 16:52, 13 December 2013

1,979 bytes added ,  13 December 2013
→‎Developer Tools
Line 319: Line 319:
=== Developer Tools ===
=== Developer Tools ===


Back in the day when Firebug came out it took the developer world by storm. Suddenly we could debug web sites in the browser, alter CSS until it is right and copy it back to our editors and generally have a predictable way of fixing things. And having a console instead of alert() made our lives much easier, too (as we didn't get stuck in endless loops when debugging mouseover handlers for example).
In today's development world, browsers have evolved from being simple tools to display web content to being fully-fledged read and write development tools. Modern in-built tools allow developers to not only see the source code, but also modify it live in the browser, measure what is being shown and seeing the impact their work has in the browser in terms of performance.  


Almost all browsers have copied the interface and ideas of Firebug in their developer tools: Safari and Chrome, Opera with Dragonfly. Microsoft went a slightly different way but still it is very much like Firebug when it comes to debugging web sites in the browser.
Debugging our web code has evolved from trial and error to live code editing, measuring the impact we have and being able to inject code to try out changes without having to re-build the site and risk breaking the experience of our end users during development.


Right now the developer tools team in Mozilla has one person seconded to keeping Firebug up-to-date with the changing Firefoxes but are working on a new set of developer tools that will not copy Firebug but extend the idea of developer tools to allow for much more full-scale development in the browser. The Web Console and Scratchpad in newer Firefoxes are a preview of what is to come there.
Mozilla was the pioneer in this area, with Firebug being the extension to Firefox that made it a developer browser rather than just a way to display the web. All other browsers copied that model and created in-build developer tools that allow all kind of interaction and measuring.
 
The [https://developer.mozilla.org/en-US/docs/Tools Firefox Developer Tools] differ slightly from the tools shipped with Safari, Chrome or Internet Explorer as they are not a single "debugging suite" but consist of several components that each do one job and one job well, to be turned on and off on demand by developers depending what they are currently trying to achieve.
 
The different parts of the developer tools are explained in detail with screencasts and usage examples on their [https://developer.mozilla.org/en-US/docs/Tools Wiki page], but here is a quick reminder what each of them mean:
 
==== Basic Tools ====
 
* [https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector Page Inspector]
* [https://developer.mozilla.org/en-US/docs/Tools/Web_Console Web Console]
* [https://developer.mozilla.org/en-US/docs/Tools/Style_Editor Style Editor]
* [https://developer.mozilla.org/en-US/docs/Tools/Debugger Debugger]
* [https://developer.mozilla.org/en-US/docs/Tools/Profiler Profiler]
* [https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor Network Monitor]
* [https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor">Shader Editor]
 
==== Mobile Tools ====
* [https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging Remote Debugging]
* [https://developer.mozilla.org/en-US/docs/Tools/Firefox_OS_Simulator Firefox OS Simulator]
* [https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View Responsive Design View]
 
==== Standalone Tools ====
* [https://developer.mozilla.org/en-US/docs/Tools/Scratchpad Scratchpad]
* [https://developer.mozilla.org/en-US/docs/Tools/Browser_Console Browser Console]
* [https://developer.mozilla.org/en-US/docs/Tools/GCLI Developer Toolbar]
* [https://developer.mozilla.org/e* n-US/docs/Tools/3D_View 3D View]
* [https://developer.mozilla.org/en-US/docs/Tools/Paint_Flashing_Tool Paint Flashing Tool]
* [https://developer.mozilla.org/en-US/docs/Tools/Debugging_Firefox_JS_Code Debugging Firefox JS Code]
 
Up-to-date information about Developer Tools can always be found in the [https://developer.mozilla.org//en-US/docs/Tools/New Release notes]


=== Boot to Gecko ===
=== Boot to Gecko ===
Cheilmann
Confirmed users
376

edits

Retrieved from "https://wiki.mozilla.org/Special:MobileDiff/789505"

Navigation menu