782437 - [devhub] code/SDK: Firefox Dev Tools

Status: RESOLVED FIXED

(Marketplace Graveyard :: Developer Pages, defect, P1)

Description

[Fred Wenzel [:wenzel]]

The devhub's developer subsite has a "code it" or "SDK" section.

One of the pages should explain, shortly, what Firefox Dev Tools are the most relevant to open web app development (and link off to more information). I suggest we cover Nightly (?) + Responsive Mode and anything else that might be interesting.

Please identify a page on MDN (or work that needs to happen) to cover this.

Comment 1

[Fred Wenzel [:wenzel]]

CCing Ron and Thomas who would like this page, so they can send it to developers inquiring how to develop open web apps.

Comment 2

[Fred Wenzel [:wenzel]]

The deadline for this content is: Monday August 20, end of day. Let me know if you have any questions.

Comment 3

[Kevin Dangoor]

The official Tools page is here: https://developer.mozilla.org/en-US/docs/Tools

but that page is not tuned for open web app development and there isn't a page yet for Responsive Design View... I think I filed a bug on that, and I'll check later to confirm.

Comment 4

[Daniel Buchner [:dbuc]]

I have some ideas on this, let me run it by Brian Dils (praying he has the time to do the mocks/UX!)

Comment 5

[Fred Wenzel [:wenzel]]

Thanks Kevin and Dan! Let me know how it goes!

Comment 6

[Fred Wenzel [:wenzel]]

Please assign this to Jen when you think this is ready to be included. Thanks!

Comment 7

[Daniel Buchner [:dbuc]]

Here are the following sections I'd like to see:

- Developer Tools in Firefox -

Firefox now ships with a default set of developer tools built from the ground up to ensure a great development experience that is snappy and efficient. Below are a few of the tools that you'll find useful as you develop apps for mobile versions of Firefox and Firefox OS.


*Each of the following highlight sections should have an accompanying screenshot, starting left aligned then alternating right/left thereafter*

- Page Inspector -

Select DOM elements in your app's page for inspection or live modification of their styles attributes, and structure.

- Responsive Mode -

View your web app in different screen dimensions commonly found on devices today, or enter your own user-defined dimensions to test. You can also change screen orientation to better understand how your device will respond.

- Style Editor -

Edit your styles in real-time in a dedicated CSS style editor. Features include: toggle on/off styles, rules, and pseudo selectors, create new style sheets that are applied instantly to the page you're editing, and save any of your CSS style changes to a local file.


- Firebug - This will be a smaller subsection that runs the width of the page. The image used will be the Firebug logo, not a screenshot.

For other features not currently included in Firefox's built-in developer tools, please download the Firebug add-on here -LINK HERE-

Comment 8

[Kevin Dangoor]

It seems like we'd want to mention the Debugger, too, wouldn't we? Those other tools are all design-oriented. The Debugger is a JavaScript tool that already has remote features for mobile (and ships to GA next week)

Comment 9

[Fred Wenzel [:wenzel]]

Thanks, I like that draft, dbuc. Can you throw that into a page on MDN? CCing Mark Giffin: Can you suggest where dbuc should put this? Thanks!

Comment 10

[Daniel Buchner [:dbuc]]

Technically this has its own MDN page already, and each of the tools has it's own subpage: https://developer.mozilla.org/en-US/docs/Tools

The wording is a bit more concise in what I generated, but I'm not sure it warrants generating a second copy on MDN, what do you think we should do?

Comment 11

[Daniel Buchner [:dbuc]]

(In reply to Kevin Dangoor from comment #8)
> It seems like we'd want to mention the Debugger, too, wouldn't we? Those
> other tools are all design-oriented. The Debugger is a JavaScript tool that
> already has remote features for mobile (and ships to GA next week)

What is the time frame as of now for remote debugging? That is a huge tooling piece for this mobile-focused Dev Tools overview.

Comment 12

[Fred Wenzel [:wenzel]]

(In reply to Daniel Buchner [:dbuc] from comment #10)
> The wording is a bit more concise in what I generated, but I'm not sure it
> warrants generating a second copy on MDN, what do you think we should do?

For the way the devhub is built right now, we need to put the content on an MDN page so it can be pulled in and shown by the devhub. This may change later, but for now that's how the devhub gets its content.

Comment 13

[Fred Wenzel [:wenzel]]

Feel free to create a page underneath this one: https://developer.mozilla.org/en-US/docs/Apps/marketplace

Comment 14

[Kevin Dangoor]

(In reply to Daniel Buchner [:dbuc] from comment #11)
> (In reply to Kevin Dangoor from comment #8)
> > It seems like we'd want to mention the Debugger, too, wouldn't we? Those
> > other tools are all design-oriented. The Debugger is a JavaScript tool that
> > already has remote features for mobile (and ships to GA next week)
> 
> What is the time frame as of now for remote debugging? That is a huge
> tooling piece for this mobile-focused Dev Tools overview.

Remote debugging ships in Firefox 15 (next week).

https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/

I have not personally run B2G yet, but the remote debugging feature should work with B2G as well as Fennec.

Comment 15

[Fred Wenzel [:wenzel]]

What's the status of this? Can we tie this up for this iteration, and then iterate from there?

Please put your content on MDN, then comment here with a link and assign this bug to Jen Fong for integration. Thanks!

(In reply to Kevin Dangoor from comment #14)
> I have not personally run B2G yet, but the remote debugging feature should
> work with B2G as well as Fennec.

Awesome, excited to see/explore that.

Comment 16

[Mark Giffin [:markg]]

(In reply to Daniel Buchner [:dbuc] from comment #7)
> Here are the following sections I'd like to see:
> 
> - Developer Tools in Firefox -

I added dbuc's text to this new MDN page:

https://developer.mozilla.org/en-US/docs/Apps/marketplace/App_developer_tools

Reassigning to Jen Fong.

Comment 17

[Fred Wenzel [:wenzel]]

Thanks Mark!

Comment 18

[Jen Fong-Adwent [:ednapiranha]]

merged in: https://github.com/mozilla/zamboni/commit/260bc55cfd2f6b02c75d84316ba7b001864d96a8