| 1 | |
| 2 | Interested in contributing to React DevTools, but not sure where to start? This is the place! |
| 3 | |
| 4 | # Install project dependencies |
| 5 | To get started, check out the React repo: |
| 6 | ```sh |
| 7 | git clone git@github.com:facebook/react.git |
| 8 | ``` |
| 9 | Next install dependencies: |
| 10 | ```sh |
| 11 | cd <react-repo> |
| 12 | yarn install |
| 13 | ``` |
| 14 | |
| 15 | # Build React and React DOM |
| 16 | Next, check out (or build) the local version of React that DevTools uses: |
| 17 | |
| 18 | ### Option 1 (fastest): Checkout pre-built React |
| 19 | To check out the latest version of React (built by CI from the `main` branch) run: |
| 20 | ```sh |
| 21 | cd <react-repo> |
| 22 | |
| 23 | cd scripts/release |
| 24 | yarn install |
| 25 | |
| 26 | ./download-experimental-build.js --commit=main |
| 27 | ``` |
| 28 | |
| 29 | ### Option 2: Build from source |
| 30 | If your DevTools change includes local changes to React (or if CI is down for some reason) you can also build from source: |
| 31 | ```sh |
| 32 | cd <react-repo> |
| 33 | yarn build-for-devtools |
| 34 | ``` |
| 35 | |
| 36 | # Testing your changes |
| 37 | |
| 38 | ### Option 1 (fastest): Using the test shell |
| 39 | Most changes can be tested using the DevTools test app. To run this, you'll need two terminals: |
| 40 | |
| 41 | First, run DevTools in DEV mode: |
| 42 | ```sh |
| 43 | cd <react-repo> |
| 44 | cd packages/react-devtools-inline |
| 45 | yarn start |
| 46 | ``` |
| 47 | Next, run the test shell: |
| 48 | ```sh |
| 49 | cd <react-repo> |
| 50 | cd packages/react-devtools-shell |
| 51 | yarn start |
| 52 | ``` |
| 53 | Now any changes you make to DevTools will automatically reload in the test app at http://localhost:8080 |
| 54 | |
| 55 | ### Option 2: Using the extension |
| 56 | Some changes requiring testing in the browser extension (e.g. like "named hooks"). To do this, run the following script: |
| 57 | ```sh |
| 58 | cd <react-repo> |
| 59 | cd packages/react-devtools-extensions |
| 60 | yarn build:chrome:local && yarn test:chrome |
| 61 | ``` |
| 62 | This will launch a standalone version of Chrome with the locally built React DevTools pre-installed. If you are testing a specific URL, you can make your testing even faster by passing the `--url` argument to the test script: |
| 63 | ```sh |
| 64 | yarn build:chrome && yarn test:chrome --url=<url-to-test> |
| 65 | ``` |
| 66 | |
| 67 | # Unit tests |
| 68 | Core DevTools functionality is typically unit tested (see [here](https://github.com/facebook/react/tree/main/packages/react-devtools-shared/src/__tests__)). To run tests, you'll first need to build or download React and React DOM ([as explained above](#build-react-and-react-dom)) and then use the following NPM script: |
| 69 | ```sh |
| 70 | yarn test-build-devtools |
| 71 | ``` |
| 72 | You can connect tests to a debugger as well if you'd like by running: |
| 73 | ```sh |
| 74 | yarn debug-test-build-devtools |
| 75 | ``` |
| 76 | |
| 77 | # Finding the right first issue |
| 78 | The React team maintains [this list of "good first issues"](https://github.com/facebook/react/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22Component%3A+Developer+Tools%22+label%3A%22good+first+issue%22) for anyone interested in contributing to DevTools. If you see one that interests you, leave a comment! |
| 79 | |
| 80 | If you have ideas or suggestions of your own, you can also put together a PR demonstrating them. We suggest filing an issue before making any substantial changes though, to ensure that the idea is something the team feels comfortable landing. |