Interested in contributing to React DevTools, but not sure where to start? This is the place!
Install project dependencies
To get started, check out the React repo:
git clone git@github.com:facebook/react.git
Next install dependencies:
cd <react-repo>
yarn install
Build React and React DOM
Next, check out (or build) the local version of React that DevTools uses:
Option 1 (fastest): Checkout pre-built React
To check out the latest version of React (built by CI from the main
branch) run:
cd <react-repo>
cd scripts/release
yarn install
./download-experimental-build.js --commit=main
Option 2: Build from source
If your DevTools change includes local changes to React (or if CI is down for some reason) you can also build from source:
cd <react-repo>
yarn build-for-devtools
Testing your changes
Option 1 (fastest): Using the test shell
Most changes can be tested using the DevTools test app. To run this, you'll need two terminals:
First, run DevTools in DEV mode:
cd <react-repo>
cd packages/react-devtools-inline
yarn start
Next, run the test shell:
cd <react-repo>
cd packages/react-devtools-shell
yarn start
Now any changes you make to DevTools will automatically reload in the test app at http://localhost:8080
Option 2: Using the extension
Some changes requiring testing in the browser extension (e.g. like "named hooks"). To do this, run the following script:
cd <react-repo>
cd packages/react-devtools-extensions
yarn build:chrome:local && yarn test:chrome
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:
yarn build:chrome && yarn test:chrome --url=<url-to-test>
Unit tests
Core DevTools functionality is typically unit tested (see here). To run tests, you'll first need to build or download React and React DOM (as explained above) and then use the following NPM script:
yarn test-build-devtools
You can connect tests to a debugger as well if you'd like by running:
yarn debug-test-build-devtools
Finding the right first issue
The React team maintains this list of "good first issues" for anyone interested in contributing to DevTools. If you see one that interests you, leave a comment!
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.