Open Debugger Fails to Open After React Native Dev Menu Update (v0.72, v0.73, v0.74)

[muhammadashfaq]

Description

Since react native 0.72, Open debugger never works and throws error. This is the bug which wastes a lot of time in the debugging over Metro.

Please update documentation and tell it's alternative because this is the bug which is costing development and debugging time.

I have tried yarn start --experimental-debugger but that's is not stable. It disconnects when you re-run the project and also cashes project on Xcode for iOS for android as well.

Please update solution. @cortinico @cipolleschi @kevin-lyn

Steps to reproduce

1. Run the application on 0.74,0.73.0.72
2. iOS Simulator: Cmd ⌘ + D (or Device > Shake)
3. Android emulators: Cmd ⌘ + M (macOS) or Ctrl + M (Windows and Linux)
4. Click Open debugger
5. See Bug in the Metro bundler.

React Native Version

0.74.1

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 14.5
  CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Memory: 43.35 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.13.1
    path: ~/.nvm/versions/node/v20.13.1/bin/node
  Yarn:
    version: 3.6.4
    path: /usr/local/bin/yarn
  npm:
    version: 10.5.2
    path: ~/.nvm/versions/node/v20.13.1/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.15.2
    path: /Users/macbook/.rvm/gems/ruby-3.0.6/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    API Levels:
      - "28"
      - "31"
      - "33"
      - "34"
      - "35"
    Build Tools:
      - 30.0.2
      - 30.0.3
      - 31.0.0
      - 33.0.0
      - 33.0.1
      - 34.0.0
      - 35.0.0
    System Images:
      - android-30 | Google APIs Intel x86 Atom
      - android-33 | Google Play Intel x86_64 Atom
      - android-34 | Google APIs Intel x86_64 Atom
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2023.3 AI-233.14808.21.2331.11842104
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 18.0.2.1
    path: /usr/bin/javac
  Ruby:
    version: 3.0.6
    path: /Users/macbook/.rvm/rubies/ruby-3.0.6/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.74.1
    wanted: 0.74.1
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: false

Screenshots and Videos

No response

[react-native-bot]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template. A reproducer needs to be in a GitHub repository under your username.

[react-native-bot]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - 0.74.6. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[react-native-bot]

:warning:	Missing Reproducible Example
:information_source:	We could not detect a reproducible example in your issue report. Please provide either: If your bug is UI related: a Snack If your bug is build/update related: use our Reproducer Template

[react-native-bot]

:warning:

Newer Version of React Native is Available!

:information_source:

You are on a supported minor version, but it looks like there's a newer patch available - undefined. Please upgrade to the highest patch for your minor or latest and verify if the issue persists (alternatively, create a new project and repro the issue in it). If it does not repro, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the most recent releases.

[cipolleschi]

@huntie

[huntie]

Hi @muhammadashfaq,

Since react native 0.72, Open debugger never works and throws error.

The error logged is intentional. Prior to 0.76, "Open Debugger" may act in two modes:

1. (By default) Attempts to open JS debugging in Flipper via the flipper:// URL scheme. As mentioned in the log you are seeing, you must have Flipper installed on your system for this to work.
2. (With --experimental-debugger) Attempts to open JS debugging in Chrome DevTools (this requires either Google Chrome or Microsoft Edge on your system).

In both cases, Metro must be running.

I have tried yarn start --experimental-debugger but that's is not stable. It disconnects when you re-run the project and also cashes project on Xcode for iOS for android as well.

Unfortunately, the JS debugging experience shipped in these React Native versions was never entirely stable. Re disconnects, a couple of things to note are: 1/ yes, reconnect if you've closed or rebuilt your app (this should be a case of hitting j to debug) 2/ make as much use of Fast Refresh as possible, rather than a full reload.

In React Native 0.76, we are fundamentally fixing this with the launch of React Native DevTools.