[Bug] React Native tools doesn't work

[zhouhao27]

🐛 What is the bug? How can we reproduce it?

React Native tools doesn't work for me in my Mac 10.15.

1. Create a RN project: npc create-expo-app@latest -t
2. I choose Navigation (TypeScript)
3. Start my application: npx start -c --dev-client
4. Run iOS simulator by pressing: i
5. Create a launch.json file for debugging

 "version": "0.2.0",
  "configurations": [
    {
      "name": "Attach to packager",
      "cwd": "${workspaceFolder}",
      "type": "reactnative",
      "request": "attach",
      "sourceMaps": true
    }
  ]
}

6. Click Attach to Package to start debugging
7. The bottom status bar is never turned to orange colour
8. If I click Open Debugger in menu, it always open Google Chrome instead of debugging inside VS Code.

Expected behavior

Break point should be reached.

Debug output

Debug Console

Attaching to the application
Starting debugger app worker.
Established a connection with the Proxy (Packager) to the React Native application

React Native output channel

[Info] Packager started.

Developer Tools console

N.A.

I'm not able to find Developer Tool.

Environment

Please tell us about your system and your project:

• npx react-native doctor or npx expo doctor if your project is using Expo:

✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check for issues with metro config
✔ Check npm/ yarn versions
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check if the project meets version requirements for submission to app stores
✔ Check native tooling versions
✔ Check for app config fields that may not be synced in a non-CNG project
✔ Check that packages match versions required by installed Expo SDK
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that native modules use compatible support package versions for installed Expo SDK

• envinfo:

System:
    OS: macOS 15.0
    CPU: (8) arm64 Apple M2
    Memory: 977.13 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.15.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
    bun: 1.1.21 - ~/.bun/bin/bun
    Watchman: 2024.06.17.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.15.2 - /opt/homebrew/bin/pod
    Homebrew: 4.3.18 - /opt/homebrew/bin/brew
    pip3: 24.1.1 - /opt/miniconda3/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 16.0.0 - /usr/bin/gcc
    Git: 2.39.5 - /usr/bin/git
    Clang: 16.0.0 - /usr/bin/clang
    FFmpeg: 7.0.1 - /opt/homebrew/bin/ffmpeg
    Curl: 8.7.1 - /usr/bin/curl
    OpenSSL: 3.0.13 - /opt/miniconda3/bin/openssl
  Servers:
    Apache: 2.4.59 - /usr/sbin/apachectl
  Virtualization:
    Docker: 27.1.1 - /usr/local/bin/docker
  SDKs:
    iOS SDK:
      Platforms: DriverKit 24.0, iOS 18.0, macOS 15.0, tvOS 18.0, visionOS 2.0, watchOS 11.0
  IDEs:
    Android Studio: 2024.1 AI-241.18034.62.2411.12169540
    VSCode: 1.92.2 - /usr/local/bin/code
    Vim: 9.0 - /usr/bin/vim
    Xcode: 16.0/16A5171r - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 11.0.23 - /usr/bin/javac
    Perl: 5.34.1 - /usr/bin/perl
    Python: 3.12.3 - /opt/miniconda3/bin/python
    Python3: 3.12.3 - /opt/miniconda3/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
  Databases:
    SQLite: 3.45.3 - /opt/miniconda3/bin/sqlite3
  Browsers:
    Chrome: 126.0.6478.127
    Safari: 18.0

• React Native Tools extension version: 1.13.0
• Expo SDK version (if applicable): 51.0.28

[zhouhao27]

This workaround works for me.

[EzioLi01]

Expo 51 is using Hermes engine as default. It should work with Hermes debugging config.

[zhouhao27]

Expo 51 is using Hermes engine as default. It should work with Hermes debugging config.

Got the following error message in Output when I tried to use Hermes:

[Info] Need to check main file and entry point of open module, will setup and write new content if they're not existing. Path: /Users/zhouhao/Projects/Study/rn/my-app/node_modules/open

[Info] Find open-main.js and entry in open module, skip setup...

[Info] Starting Packager

error No Metro config found in /Users/zhouhao/Projects/Study/rn/my-app.
[Error] Error: Could not start the packager.

[Error] Error: Could not start the packager.

Error in Debug Console:

Launching the application
An error occurred while launching the application. Could not start the packager. (error code 303)

My launch.json:

    {
      "name": "Debug iOS Hermes",
      "request": "launch",
      "type": "reactnativedirect",
      "cwd": "${workspaceFolder}",
      "platform": "ios"
    },

[EzioLi01]

Hey @zhouhao27 , if you still need help, could you please open a new issue with the demo to help me repro this error? Actually I cannot repro this in my local with sample app.