rn-chrome-devtools-frontend

Source code for React Native's debugger frontend, based on Chrome DevTools. This project is periodically compiled and checked into the React Native repo as @react-native/debugger-frontend.

This repository is a fork of ChromeDevTools/devtools-frontend.

Development

Initial setup

1. Install depot_tools (ensuring your PATH is updated).

2. This repository must be located inside a gclient workspace directory. Run the setup.sh script to perform this one-time step (which will relocate the repo folder).

   # Using `source` will enable the script to change dir in your shell
   source setup.sh

Build-and-run options

1. Build continuously with a file watcher:

   npm run watch

2. Build with the default config once:

   npm run build

3. Build with the release config once:

   npm run build-release

This can then be served from a static web server to test locally:

python3 -m http.server 8000 --directory out/Default/gen/front_end

The frontend will be available at http://localhost:8000/inspector.html (or http://localhost:8000/rn_inspector.html for the RN-specific entry point).

Syncing with the upstream repo

Periodically, we will sync this project with the upstream ChromeDevTools/devtools-frontend repo. We always update our fork from a stable upstream branch.

Viewing the last synced version

git tag --merged <branch>

Performing a repo sync

1. (One-time prerequisite) Add a Git remote pointing to ChromeDevTools/devtools-frontend.

   git remote add chromedevtools git@github.com:ChromeDevTools/devtools-frontend.git

   Note: The chromedevtools naming is optional — upstream will typically be set already when originally cloning your local repo with gh repo clone.

2. Merge with the target chromedevtools branch, then resolve all conflicts(!).

   git switch -c repo-sync # Create a new branch for the repo sync PR
   git rebase upstream/main # Ensure your local branch is up-to-date
   git fetch --all
   git merge chromedevtools/chromium/5845

3. Submit and merge your PR.

4. Tag the merge commit! This marks the point at which we synced the repo with the upstream branch.

   git tag sync-chromium-5845

Contributing

Project documentation

Check out the project documentation for instructions to set up, use, and maintain a DevTools front-end checkout, as well as design guidelines, and architectural documentation.

Additional references

• DevTools documentation: devtools.chrome.com
• Debugging protocol docs and Chrome Debugging Protocol Viewer
• awesome-chrome-devtools: recommended tools and resources
• Contributing to DevTools: bit.ly/devtools-contribution-guide
• Contributing To Chrome DevTools Protocol: docs.google.com
• DevTools Design Review Guidelines: design_guidelines.md

---

Code of Conduct

Meta has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Contributing guide

Read the contributing guide to learn about our development process.

License

This project extends the BSD 3-Clause license from ChromeDevTools/devtools-frontend, viewable in the LICENSE file.