Contribute on Nightly

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

Using --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

You can download Firefox Nightly from here (or here if you want links that you can copy/paste).

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+C and 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:

  1. make sure the Add-ons panel is selected and click on "Load Temporary Add-on",
  2. browse to the root of the git repository you just cloned, then to the "devtools" folder in it,
  3. select the "install.rdf" file
  4. that's it! You should now see the add-on being registered and appear in the list,
  5. open devtools. They will be using the local sources. Work and experiment on the codebase, then hit CTRL+ALT+R shortcut to reload the tools. You should see your changes applied.

How to register the devtools addon living in gecko codebase, in order to load devtools from a local checkout.

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.

Contributing

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.

Document Tags and Contributors

 Contributors to this page: Sebastianz, wbamberg, pbrosset, Sole, ochameau, jryans
 Last updated by: Sebastianz,