Interested in contributing to React DevTools, but not sure where to start? This is the place!
To get started, check out the React repo:
git clone git@github.com:facebook/react.git
Next install dependencies:
cd <react-repo>
yarn install
Next, check out (or build) the local version of React that DevTools uses:
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
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
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
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>
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
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.