|
|
| (60 intermediate revisions by 16 users not shown) |
| Line 1: |
Line 1: |
| This page is the place to learn how to start contributing to the Firefox Developer Tools.
| | The contents of this page have been migrated to http://firefox-dev.tools/#getting-in-touch. |
| | |
| The Firefox Developer Tools are developed by the Mozilla community. We focus on building tools that make life easier for web (and mobile web) developers, addon developers, and Firefox developers. We hope the information on this page will help you become an active member of our community! | |
| | |
| If after reading this wiki page, you still aren't sure what you're next steps are, [[#Communication|reach out to us on IRC]].
| |
| | |
| == Communication ==
| |
| | |
| * Twitter: [https://twitter.com/FirefoxDevTools @FirefoxDevTools]
| |
| * Mailing list: [https://lists.mozilla.org/listinfo/dev-developer-tools dev-developer-tools]
| |
| * Blog (shared): [http://hacks.mozilla.org/ Mozilla Hacks]
| |
| * [[DevTools|Weekly phone calls]]
| |
| | |
| On top of that, we make heavy use of IRC chat in our day to day development. If you haven't used IRC before, check out the [[IRC|guide to getting started with IRC]].
| |
| | |
| We hang out in the '''#devtools''' channel at irc://irc.mozilla.org/devtools
| |
| | |
| If you have questions about a specific part of the code, here are some good people to ping:
| |
| | |
| * '''Debugger''': past, vporof, fitzgen, jimb, robcee
| |
| * '''Inspector''': dcamp, Optimizer, mikeratcliffe
| |
| * '''Style Editor''': harth, mikeratcliffe
| |
| * '''Console''': msucan, robcee
| |
| * '''Network Monitor''': vporof, robcee
| |
| * '''Developer Toolbar''': jwalker, mikeratcliffe
| |
| * '''Profiler''': anton, robcee
| |
| * '''Scratchpad''': benvie, robcee, anton
| |
| | |
| == Reporting Bugs and Requesting Features ==
| |
| | |
| To report a bug/usability papercut/smaller feature/etc, [https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools file a bug in the Developer Tools component] on Mozilla's Bugzilla.
| |
| | |
| To suggest a larger feature, gather use cases, user stories, a statement of the problem your feature is solving, etc and [[#Communication|post them to the mailing list]] where we can flesh the feature out as a community.
| |
| | |
| == Mentored and Good First Bugs ==
| |
| | |
| '''[https://bugzilla.mozilla.org/buglist.cgi?j_top=OR&f1=component&list_id=7519021&o1=allwords&resolution=---&emailtype1=exact&status_whiteboard_type=allwordssubstr&emailassigned_to1=1&query_format=advanced&status_whiteboard=mentor%3D&bug_status=UNCONFIRMED&bug_status=NEW&bug_status=REOPENED&bug_status=VERIFIED&email1=nobody%40mozilla.org&v1=Developer%20Tools&product=Firefox List of available mentored and good first bugs]'''
| |
| | |
| If you want to pick one of these up, feel free to ask for help in attacking the bug right in the bug itself, in [[#Communication|#devtools on irc.mozilla.org, or on the dev-developer-tools mailing list]]!
| |
| | |
| One more useful link: [https://bugzil.la/comp%3A%22Developer%20Tools%22 all open developer tools bugs] might have other items you'd find interesting to work on.
| |
| | |
| [[Category:New Contributor Landing Page]]
| |
| | |
| == Hacking ==
| |
| | |
| === Getting the Source ===
| |
| | |
| Follow the instructions on [https://developer.mozilla.org/En/Simple_Firefox_build how to build Firefox], except that you will need to use:
| |
| | |
| hg clone http://hg.mozilla.org/integration/fx-team
| |
| | |
| Instead of:
| |
| | |
| hg clone http://hg.mozilla.org/mozilla-central
| |
| | |
| ==== Incremental Builds ====
| |
| | |
| Once you've already built Firefox once, and you just want to incrementally update your build with your latest devtools changes, you can run:
| |
| | |
| $ ./mach build toolkit/devtools browser
| |
| | |
| Which is much faster and should only take a few seconds.
| |
| | |
| === Running your build ===
| |
| | |
| ==== First Run ====
| |
| | |
| Once you have built Firefox, you can run it with
| |
|
| |
| $ ./mach run -p development
| |
| | |
| What is the <code>-p development</code>? It is a flag telling Firefox to use a different [https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data profile], named "development" (this name can be anything you want). If it does not exist the first time you run it, Firefox will open a popup and you can create a new profile with the name you passed in. This will prevent you from seeing an error message telling you that you need to close your main browser window, and it will let you make settings changes without worrying about messing up your normal profile.
| |
| | |
| Once this command runs, you should see a new Firefox window, called "Nightly". You may want to make a couple quick changes to the profile. So type '''about:config''' in the URL bar, click through the warning page, and search for '''devtools'''.
| |
| | |
| The following two settings allow you to use the [https://developer.mozilla.org/en-US/docs/Debugging_JavaScript#JavaScript_Debugger browser debugger] to set breakpoints inside of the devtools code, and let you run the Scratchpad in the ''Browser'' environment:
| |
| | |
| '''devtools.chrome.enabled''' = true
| |
| '''devtools.debugger.remote-enabled''' = true
| |
| | |
| This setting prints all packets sent over the remote debugging protocol to stdout:
| |
| | |
| '''devtools.debugger.log''' = true
| |
| | |
| Restart the browser to apply any configuration changes.
| |
| | |
| ==== Development workflow ====
| |
| | |
| As you make changes to the code, you can run the following commands to see your changes (you may want to store these in a script for reuse).
| |
| | |
| $ ./mach build toolkit/devtools browser
| |
| $ ./mach run -p development
| |
| | |
| === Running the Developer Tools Tests ===
| |
| | |
| We have two suites of tests:
| |
| | |
| * '''xpcshell''': More unit-test style of tests. No browser window, just a JavaScript shell. Mostly testing APIs directly.
| |
| * '''mochitest''': More of an integration style of tests. Fires up a whole browser window with every test and you can test clicking on buttons, etc.
| |
| | |
| ==== xpcshell Tests ====
| |
| | |
| To run all of the xpcshell tests:
| |
| | |
| $ ./mach xpcshell-test toolkit/devtools
| |
| | |
| To run a specific xpcshell test:
| |
| | |
| $ ./mach xpcshell-test toolkit/devtools/path/to/the/test_you_want_to_run.js
| |
| | |
| ==== Mochitests ====
| |
| | |
| To run the whole suite of mochitests for devtools (sit back and relax):
| |
| | |
| $ ./mach mochitest-browser browser/devtools
| |
| | |
| To run a specific tool's suite of mochitests:
| |
| | |
| $ ./mach mochitest-browser browser/devtools/<tool>
| |
| | |
| For example, run all of the debugger mochitests:
| |
| | |
| $ ./mach mochitest-browser browser/devtools/debugger
| |
| | |
| To run a specific mochitest:
| |
| | |
| $ ./mach mochitest-browser browser/devtools/path/to/the/test_you_want_to_run.js
| |
| | |
| | |
| == Resources ==
| |
| | |
| Here's a list of resources that you may find useful for hacking on DevTools. Feel free to add more if you find things are missing!
| |
| | |
| * [https://developer.mozilla.org/en-US/docs/Mercurial_FAQ#How_can_I_generate_a_patch_for_somebody_else_to_check-in_for_me.3F How to format patches]
| |
| * [http://mxr.mozilla.org/mozilla-central/ MXR Code Search]
| |
| * [https://developer.mozilla.org/en-US/docs/Mercurial_FAQ Mercurial FAQ]
| |
| * [https://developer.mozilla.org/en-US/docs/Developer_Guide/mach mach]
| |
| * [http://flailingmonkey.com/bugzilla-tips-hacks-and-etiquette Bugzilla Tips, Hacks and Etiquette]
| |
| * [http://blog.margaretleibovic.com/post/36893756730/bugzilla-101 Bugzilla 101]
| |
| * [http://www.mozilla.org/hacking/commit-access-policy/ Commit access policy]
| |
| * [http://mozillians.org Mozillians Directory]
| |
| * [https://wiki.mozilla.org/ReleaseEngineering/TryServer Try Server]
| |