View source for Engagement/Firefox/Developer Campaigns/

<br> 

= Building the Future with Firefox<br>  =

As the Developer Tools team continues to innovate, Engagement is going to need to create collaterral to support and explain the improvements as they launch. Because these are tools housed within Firefox, these projects span the space between Developer Engagament and PMMs. <br> 

We'll use this Wiki to track the projects related to in-Product developer tools as they progress. <br> 

== Project 1: ScratchPad &amp; Web Console Upgrades and more Dev Awesome with Fx 6 &amp; 7<br>  ==

=== Firefox 6 - expected to land in mid july 2011<br>  ===

'''Scratchpad'''<br> 

The Scratchpad lets developers quickly build and test JavaScript snippets in the browser.<br>VIDEO: http://antennasoft.net/robcee/2011/06/08/scratchpad-canvas-demo/<br> 

'''Web Console'''<br> 

Web Console adds the ability to move the console to other parts of the window or break out into a separate window.<br> 

'''Web Developer Menu'''<br> Web Developer Menu provides access to developer tools from the Firefox Aurora Menu Button 

<br>

=== Firefox 9 - expected to land in Mid-Late December 2011<br>  ===

'''Highlighter tool/Inspector''' 

a "Highlighter" that is just the visual selector of elements with the ability to overlay additional information directly over the page being inspected. Separate tools (Style Doctor, Style Inspector, etc.) will work with the selected elements. 

<br>'''Style Editor''' 

The Style Editor will allow users to edit their CSS and see the changes live. 

<br>'''Style Inspector tool''' 

Style Inspector works in conjunction with the Highlighter to allow the user to view the CSS rules being applied to an element.new console object features<br> 

<br> '''Web Console ''' 

''new console object features: ''You can open up the Web Console and type console.dir(window) and see a set of properties and values from the window object in the console object. In a JavaScript program, you can use console.group and console.groupEnd to visually group together related log messages. 

''storage service''&nbsp;: If you have a web page that console.log statements, you should be able to load the page and then open the Web Console. The log messages should appear in the console without reloading the page<br>

== Current Situation<br>  ==

Mozilla.com offers a consumer-oriented view of the product. Getting and keeping developer mind-share is a key part of the strategy to continue to make Firefox a compelling product.<br> 

=== '''Mozilla.com'''<br>  ===

We don't have a compelling developer message on Mozilla.com, beyond the developer hub we have for Add-Ons. We have a technology page that I think is cool for developers, but it doesn't tell the whole story and definitely leaves out Firebug and in-product tools.&nbsp;<br> 

=== Mozilla Developer Network<br>  ===

When you get to [https://developer.mozilla.org/en-US/ MDN home page] you see a page with several categories:<br> 

-Learn (link to MDC)<br> 

-Demos (Demo Studio and Derby)<br> 

-Firefox for Devs (link to MDC for Fx 4)<br> 

-Aurora (Link to&nbsp; Channels download page).<br> 

Nothing on this page tells you about the developer tools within Firefox, just specific developer features in "Firefox for Devs".&nbsp; MDN and MDC are meant to be open web properties about technologies on the Web, and they should remain that way--we're just missing key information about developer tools in Firefox and an easy way to navigate within MDN, MDC, Demos to find the in-product dev tools. <br> 

== The Proposed Solution<br>  ==

*Add In-product developer tools link to MDN and make sure "Firefox for Devs" tabs is always linked to the latest and greatest. 
*Create two Developer Hub pages on Mozilla.com that mirrors what we offer for Add-Ons<br> 
*One for Desktop: showing off the latest of the in-product developer tools in Firefox Desktop<br> 
**Includes videos/demos of the new tools<br> 
**Links to documentation behind tools that will live on MDC<br> 
*One for Mobile: showing off the latest of the in-product developer tools in Firefox Mobile.<br> 
**Includes videos/demos of the new tools 
**Links to documentation behind tools that will live on MDC<br> 
*Promote Firefox's Developer Tools!<br> 
**In snippets to Nightly and Aurora Users<br> 
**Test promotion of Firefox Dev Tools on Facebook and Adwords with 10K budget on each channel with release of pages.<br> 
**Reddit Campaign with IAMA for the Firefox Developer Tools team and Firebug Team.<br> 
**Potential Dev Derby/Mozilla Labs Contest to get people to help build the next generation of Develoepr Tools with prizes, etc.
**Dev-Tools Hackathon with talks from Kevin Dangoor, Rob Campbell and others to talk about the next generation of Firefox dev tools.  <br>