|
| 1 | +# Firefox Developer Tools |
| 2 | + |
| 3 | +These are the tools provided by Firefox for developers to inspect Web code. |
| 4 | + |
| 5 | +This repository aims to provide a general overview of how the tools are built, who's working on them, and how to get involved. If you are looking for user support, there's [a whole area at MDN](https://developer.mozilla.org/en-US/docs/Tools) dedicated to it. |
| 6 | + |
| 7 | +## Working on the code and contributing |
| 8 | + |
| 9 | +### `mozilla-central` vs `devtools-html` |
| 10 | + |
| 11 | +The bulk of the code is hosted in the Firefox repository (we call it `mozilla-central`, often abbreviated as `m-c`), in the [devtools](https://dxr.mozilla.org/mozilla-central/source/devtools) folder. Development of newer pieces of the tools is happening in GitHub, on the [devtools-html](https://github.com/devtools-html/) organisation. |
| 12 | + |
| 13 | +Code in `m-c` takes longer to set up from scratch, as it involves installing Mercurial and binary tools such as compiler to build a version of Firefox in your machine, but it is required if you want to work on most of the tools (as the majority of them are in this repository). Here are [the instructions](https://wiki.mozilla.org/DevTools/Hacking) plus this [very good article](https://eduardoboucas.com/blog/2017/02/09/contributing-firefox-devtools.html). |
| 14 | + |
| 15 | +The repositories in `devtools-html` are more straightforward if you're used to *the GitHub workflow*: you clone them, and then run `npm install && npm run` or similar. Roughly, you can work with each repository individually and we periodically we generate JavaScript bundles that are then copied into `m-c`. |
| 16 | + |
| 17 | +### Bugs and issue trackers |
| 18 | + |
| 19 | +Since we have code in two different places, issues and bugs are to be found in two different places: |
| 20 | + |
| 21 | +* For code in `m-c`: http://firefox-dev.tools/ which also lets you filter by good bugs for beginners. |
| 22 | +* For code in `devtools-html`: [this page](https://github.com/search?l=&q=org%3Adevtools-html+state%3Aopen&type=Issues) lists all the issues across the organisation. |
| 23 | +<!--TODO: ^^ add label:"help wanted" or similar to the query to get easy issues--> |
| 24 | + |
| 25 | +## Documentation |
| 26 | + |
| 27 | +Broadly speaking, the tools are divided in two parts: the server and the client. A **server** is anything that can be debugged: for example, your browser, but it could also be Firefox for Android, running on another device. The **client** is the front-end side of the tools, and it is what developers interact with when using the tools. |
| 28 | + |
| 29 | +Since these two parts are decoupled, we can connect to any server using the same client. This enables us to debug multiple types of servers, using the same protocol to communicate. |
| 30 | + |
| 31 | +You will often hear about `actors`. Each feature that can be debugged (for example, network) is exposed via an `actor`, which provides data about that specific feature. It's up to each server to implement some or all actors; the client needs to find out and decide what it can render on the front-side when it connects to the server. So when we want to debug a new feature, we might need to do work in two parts of the code: the server (perhaps implementing a new actor, or extending existing ones) and the client (to display the debugging data returned by the actor). |
| 32 | + |
| 33 | +Often, an actor will correspond to a panel. But a panel might want to get data from multiple actors. |
| 34 | + |
| 35 | +You might also hear about `the toolbox`. The toolbox is what everyone else calls `developer tools` i.e. the front-end that you see when you open the tools in your browser. |
| 36 | + |
| 37 | +This is just a brief overview. For more detailed documentation: |
| 38 | + |
| 39 | +* There is a [docs](https://dxr.mozilla.org/mozilla-central/source/devtools/docs) folder on `m-c` plus the [docs](https://dxr.mozilla.org/mozilla-central/source/devtools/server/docs) folder on the `server` folder in `m-c` as well. Each of these folders contain multiple MarkDown files (`.md`) with information about individual panels. |
| 40 | +* [Internal technical documentation](https://wiki.mozilla.org/DevTools#Internal_Technical_Documentation) |
| 41 | +* Additionally, check out each GitHub repository for documentation specific to that repository or module. |
| 42 | +* Not strictly a roadmap, but these are [some of our 2017 goals](https://groups.google.com/forum/#!topic/mozilla.dev.developer-tools/e-WTOb1U8Sc). |
| 43 | + |
| 44 | +## People and modules |
| 45 | + |
| 46 | +The tools are broadly divided into panels. Each panel has one or more owners, who mostly work(s) on that panel and are the best people to ask if you have specific questions about the code. |
| 47 | + |
| 48 | +* table |
| 49 | +* show organisations in github |
| 50 | + |
| 51 | +## News |
| 52 | + |
| 53 | +* Nightly blog |
| 54 | +* Hacks blog |
| 55 | + |
| 56 | +## Getting in touch |
| 57 | + |
| 58 | +* bug tracker bugzilla, search for bugs in github (?) https://github.com/search?q=org%3Adevtools-html&type=Issues |
| 59 | +https://github.com/search?q=org%3Adevtools-html+state%3Aopen&type=Issues |
| 60 | +* gh issues discuss? |
| 61 | +* mailing list |
| 62 | +* discourse |
| 63 | +* irc |
| 64 | + |
| 65 | +## Processes |
| 66 | + |
| 67 | +* RFCs |
| 68 | + |
0 commit comments