Skip to content

The Chrome DevTools UI, customized for React Native (experimental)

License

Notifications You must be signed in to change notification settings

facebookexperimental/rn-chrome-devtools-frontend

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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


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.

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.

About

The Chrome DevTools UI, customized for React Native (experimental)

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Languages

  • TypeScript 87.0%
  • JavaScript 6.4%
  • CSS 3.0%
  • HTML 1.6%
  • Python 1.0%
  • C++ 0.6%
  • Other 0.4%