This page describes a simple way of contributing to the Firefox Developer Tools that does not involve building Firefox or setting up any special environment.
You simply need to download the Firefox source code and Firefox Nightly. Then you set up Nightly to load the developer tools from the source code. When you edit the source code, a simple hotkey combination in Nightly reloads the developer tools from the updated source code.
Getting the Firefox source code
Clone the GitHub mirror from https://github.com/mozilla/gecko-dev.
git clone --depth 1 https://github.com/mozilla/gecko-dev.git
--depth 1 greatly reduces the download time (from 1 Hour down to 5 minutes on a 1MB/s connection). It will prevent you from seeing the whole repository history, but that should not matter for your first patch.
Install Firefox Nightly
Set up a development profile for Firefox
You most likely want to use a separate profile for developing Firefox. This enables you to:
- run two distinct instances of Firefox at the same time: one for regular browsing and another for hacking
- experiment and potentially crash the development profile without losing important data such as bookmarks or history.
It is fairly easy and is done by launching Firefox with an additional "
-no-remote -P" command line argument.
On Windows, you can duplicate your desktop shortcut to launch Firefox by copy pasting it (
CTRL+V) and then editing the duplicated link to pass this argument. For that right click on the icon, then select Properties and finally, append "
-no-remote -P" to the target field.
For more information, please refer to this documentation.
Load Nightly's devtools from the source code
Now, run Nightly with your development profile, enter the
about:debugging URL in a tab and then:
- make sure the Add-ons panel is selected and click on "Load Temporary Add-on",
- browse to the root of the git repository you just cloned, then to the "devtools" folder in it,
- select the "install.rdf" file
- that's it! You should now see the add-on being registered and appear in the list,
- open devtools. They will be using the local sources. Work and experiment on the codebase, then hit
CTRL+ALT+Rshortcut to reload the tools. You should see your changes applied.
From Firefox 57, you might need to enable the "extensions.legacy.enabled" option in about:config to load the devtools
The add-on also sets some internal preferences which are useful for internal development, including:
- "devtools.chrome.enabled=true" and "devtools.debugger.remote-enabled=true": these preferences enable the Browser Toolbox (these are the same preferences that are set by the Enable browser chrome and add-on debugging toolboxes and Enable remote debugging settings)
- "devtools.debugger.prompt-connection=false": suppress the warning dialog displayed when you open the Browser Toolbox.
Keeping Nightly and sources in sync
Warning: It is important to keep the sources updated if your nightly gets updated. Every time Firefox updates, you should update your local sources.
You can update your sources like this:
git fetch origin
This will just download the new changesets locally.
Once you've done this, there are two ways you can update your files:
- if you haven't made any local modifications:
git checkout origin/master
- if you have made local modifications that you want to preserve:
git rebase -i origin/master
Please refer to the git documentation for more information about how to work with git.
You can use this faster workflow to contribute to DevTools. The workflow is pretty much similar to the normal, longer process, except set up is way shorter as described above. You can skip it and jump directly to fixing bugs.