Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Contributing to React DevTools

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment