Contributing to React DevTools

contributing-to-react-devtools.md

Intrested in contributing to React DevTools, but not sure where to start? This gist should hopefully get you going.

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

cd scripts/release
yarn install

Build React and React DOM

Next, check out (or build) the local version of React that DevTools uses:

Option 1 (fastest): Checkout DevTools dependencies

cd <react-repo>
scripts/release/download-experimental-build.js --commit=main

Option 2 (if you've ade local changes to react): 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 && 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>