Unable to debug new Hermes React Native app using Chrome DevTools

[DigitalZebra]

Description

I'm unable to debug a new React Native app that's using Hermes by following the Hermes debugging instructions found here: https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools

Upon following those steps and opening the console in the stand alone Chrome DevTools, I see this error:

DevTools failed to load source map: Could not load content for http://localhost:8081/index.map?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.tempRN0710RC3: Fetch through target failed: Cannot read properties of null (reading 'loadNetworkResource'); Fallback: Unknown error

Nothing shows up in the Sources tab. Navigating to that URL outside of the dev tools does load the source map file successfully.

I am able to debug successfully using Flipper - source maps seem to load fine there.

Version

0.71.0-rc.3

Output of npx react-native info

info Fetching system and libraries information...
System:
    OS: macOS 12.6.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 2.67 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.0 - ~/.nvm/versions/node/v16.13.0/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.0/bin/yarn
    npm: 8.1.0 - ~/.nvm/versions/node/v16.13.0/bin/npm
    Watchman: 2022.03.21.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: 2021.2 AI-212.5712.43.2112.8609683
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 18.0.1.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.0-rc.3 => 0.71.0-rc.3 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Create a new React Native project using the command: npx react-native init RN0710RC3 --version 0.71.0-rc.3
2. Once created, cd in to project directory. Run using yarn ios or yarn android
3. Follow steps outlined in Hermes debugging documentation: https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools
4. Notice source maps don't load, unable to set breakpoints.

Snack, code example, screenshot, or link to a repository

No code example since it's reproducible using a new RN 70 or 71 project: npx react-native init RN0710RC3 --version 0.71.0-rc.3

[mattbfb]

Recent versions of Chrome have stopped fetching sources from URLs in this scenario. We have an upcoming fix that will restore this functionality (by fetching the source directly, instead of via a URL). In the meantime, the easiest way to restore source loading is by using a previous version of Chrome, or Flipper.

[Kasik-D]

Hi, same issues

System:
OS: macOS 12.6
CPU: (8) arm64 Apple M1
Memory: 116.91 MB / 8.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.17.0 - /usr/local/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.15.0 - /usr/local/bin/npm
Watchman: 2022.09.26.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /Users/danil/.rvm/gems/ruby-2.7.5/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 21.4, iOS 16.0, macOS 12.3, tvOS 16.0, watchOS 9.0
Android SDK: Not Found
IDEs:
Android Studio: 2021.3 AI-213.7172.25.2113.9014738
Xcode: 14.0/14A309 - /usr/bin/xcodebuild
Languages:
Java: 11.0.16.1 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 18.1.0 => 18.1.0
react-native: 0.70.6 => 0.70.6
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

[DigitalZebra]

Thanks @mattbfb - would you recommend I close this or leave it open for tracking purposes? Thanks again for the background - I'll use Flipper for the time being.

[hishammalik]

Recent versions of Chrome have stopped fetching sources from URLs in this scenario. We have an upcoming fix that will restore this functionality (by fetching the source directly, instead of via a URL). In the meantime, the easiest way to restore source loading is by using a previous version of Chrome, or Flipper.

We can't use flipper in our case as it's not compatible with react-native-firebase. So this issue is quite a show-stopper for our react-native upgrade initiative.

Any suggestions over how source map could be added manually? Thanks.

[benrbrook]

It seems like this should have been fixed in the latest 0.71 release.

By loading source maps over the network with Metro we’ve restored the ability to use source maps in recent versions of Chrome Dev Tools outside of Flipper.

https://reactnative.dev/blog/2023/01/12/version-071#hermes

However, I'm still not able to load source maps with the same error as above:
DevTools failed to load source map: Could not load content for http://localhost:8081/index.map?platform=ios&dev=true&minify=false&modulesOnly=false&runModule=true&app=appname: Fetch through target failed: Cannot read properties of null (reading 'loadNetworkResource'); Fallback: Unknown error

Any ideas on how to get around this or if it's still an outstanding issue? Thanks!

System:
    OS: macOS 13.1
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 27.85 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.1.0 - /usr/local/bin/node
    Yarn: 1.22.19 - ~/project-name/node_modules/.bin/yarn
    npm: 8.19.3 - /usr/local/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.11.3 - /Users/bbrook/.rbenv/shims/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK: Not Found
  IDEs:
    Android Studio: Not Found
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 16.0.1 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.71.1 => 0.71.1 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

[wadeww]

I'm still seeing this issue with react native v0.71.1 and Chrome 109.0.5414.119

[robincwillis]

I'm also seeing the same issue as @benrbrook with react native v0.71.1 and Chrome 109.0.5414.119

[bcsaxon]

I'm seeing a similar issue with react-native-debugger and RN v0.71

[itsmeshusha]

same issue. devtools didnt work https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools

[gabriellend]

Just thought I'd add my two cents. This is also happening for me on 0.71.2 and Chrome Version 110.0.5481.77. Console doesn't show logs and files don't show up in Sources. Actually, they've never showed up in Sources, but I could definitely use the Console before. Also using react-native-firebase so cannot use Flipper. Hoping for some guidance soon, thank you!

[jaexplorer]

I also cannot get this to work with react-native-debugger and RN v0.71. Any update?

[matthewmturner]

It seems source maps are disabled by default. Could that be related?

[dnelsonlivecurrence]

@matthewmturner I was able to get the debugger to work when following those instructions, but only when running from XCode. We are also using Firebase.