Unable to debug new Hermes React Native app using Chrome DevTools

Question

Unable to debug new Hermes React Native app using Chrome DevTools

DigitalZebra opened this issue 2 years ago · 38 comments

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

Create a new React Native project using the command: npx react-native init RN0710RC3 --version 0.71.0-rc.3
Once created, cd in to project directory. Run using yarn ios or yarn android
Follow steps outlined in Hermes debugging documentation: https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools
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

Answer 1 · 2022-12-09T13:20:52.000Z

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.

Answer 2 · 2022-12-16T11:22:07.000Z

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

Answer 3 · 2022-12-26T18:26:43.000Z

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.

Answer 4 · 2022-12-30T00:59:06.000Z

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.

Answer 5 · 2023-01-20T05:51:04.000Z

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

Answer 6 · 2023-01-25T16:39:38.000Z

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

Answer 7 · 2023-01-28T22:38:03.000Z

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

Answer 8 · 2023-02-06T23:03:50.000Z

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

Answer 9 · 2023-02-07T15:22:50.000Z

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

Answer 10 · 2023-02-15T22:48:34.000Z

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!

Answer 11 · 2023-02-22T20:23:18.000Z

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

Answer 12 · 2023-03-07T22:07:08.000Z

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

Answer 13 · 2023-03-14T12:44:54.000Z

@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.

Answer 14 · 2023-03-15T06:50:19.000Z

any updates ?

Answer 15 · 2023-03-17T03:08:15.000Z

a temporary workaround is to disable the js source maps option in the devtool 😵‍💫

Answer 16 · 2023-03-29T00:54:23.000Z

This seems to be still happening on 0.71.4. Has anyone able to find a workaround?

Answer 17 · 2023-04-02T16:59:44.000Z

I had to temporarily disable Hermes in Podfile :hermes_enabled => false, for debug mode to be able to use react-native-debugger. Any other workarounds?

Answer 18 · 2023-04-02T23:21:57.000Z

Do you need to also disable hermes in Android for it to work?
If so, how do you disable hermes in Android?

Answer 19 · 2023-04-03T18:10:57.000Z

Android seems fine and I can use still react-native-debugger without disabling Hermes so I only do it in iOS. But to answer your question, I'm using the latest RN 0.71.4 so it should be in android/app/build.gradle and invert the flag hermesEnabled:

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }

Answer 20 · 2023-04-27T10:37:09.000Z

The state of debugging RN has been a difficult one from the beginning. Most developers use console.log to "debug" to this day. There is no integration into VScode (which has an excellent debugger) and hermes does not improve a lot in that regard.
I wonder if there are any devs out there who managed to get debugging working (consistently)?

Answer 21 · 2023-05-13T14:03:13.000Z

Still have this problem. It seems that I should use use older version of react native.

Answer 22 · 2023-06-07T06:31:21.000Z

anyone knows if this is getting adressed in v0.72 ?
On Android I can debug with Hermes enabled, and it is actually a lot better in terms of performance debugging Android with Hermes, we just need to be able to debug on ios (we cant use flipper on our project)

Answer 23 · 2023-06-12T10:16:28.000Z

Having the same issue in react-native:0.71.8, getting this error: Calling synchronous methods on native modules is not supported in Chrome.

Answer 24 · 2023-06-29T14:20:02.000Z

I had to temporarily disable Hermes in Podfile :hermes_enabled => false, for debug mode to be able to use react-native-debugger. Any other workarounds?

I am using RN 0.70.10 and cannot have both hermes disabled and flipper disabled as I get a build errors related to hermes.h or Thread 1: signal SIGABRT because of "Library not loaded: @rpath/hermes.framework/hermes".

Edit: Solved this crash by doing as suggested here, but debugging still doesn't work. Still getting error even with hermes on false and flipper disabled:
info Opening flipper://null/Hermesdebuggerrn?device=React%20Native...
error Browser exited with error:, Error: invalid url, missing http/https protocol

Did you do any other command apart from the disabling of hermes and pod install again? I also see that my project's /* [CP] Embed Pods Frameworks */ task is being deleted from the project.pbxproj after disabling hermes, is this normal?

I am also using react-native-firebase, so I cannot use Flipper. This is making it impossible to debug the iOS app on Mac. :(

Answer 25 · 2023-07-11T22:40:21.000Z

Still seeing this as of react-native:0.71.12 on IOS.

Tried generating a bundle with a sourcemap by adding the sourcemap-output flag to my build command (see below) and adding export SOURCEMAP_FILE="$(pwd)/../main.jsbundle.map"; to my ios/.xcode.env file as stated here. With this I do see a sourcemap file created but somehow it is not being picked up by the chrome debugger.

The whole build command I used is this react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=true --platform='ios' --sourcemap-output='./ios/main.jsbundle.map'

Answer 26 · 2023-07-22T05:58:55.000Z

I'm experiencing the same issue with react-native:0.71.12 on IOS. Subscribing...

Answer 27 · 2023-07-22T05:59:12.000Z

⚠️	Missing Reproducible Example
ℹ️	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.

Answer 28 · 2023-09-11T11:26:40.000Z

temporary solution

in android/app/build.gradle file

in dependencies
reverse if else case for hermesEnabled.toBoolean()

Answer 29 · 2023-10-27T15:11:32.000Z

This works for me: https://github.com/gusgard/react-native-devsettings

Answer 30 · 2023-10-27T17:43:31.000Z

[@jkoutavas]) thanks.. I will try

app://arkansasSaneja

Answer 31 · 2023-11-03T09:00:59.000Z

This works for me: https://github.com/gusgard/react-native-devsettings

Sorry, Im using MKKV so this library didnt work for me

Answer 32 · 2023-11-03T09:01:11.000Z

Any updates?

Answer 33 · 2023-11-04T15:52:20.000Z

This works for me: https://github.com/gusgard/react-native-devsettings

Sorry, Im using MKKV so this library didnt work for me

Do you mean this? https://github.com/mrousavy/react-native-mmkv

If so, why doesn't it work?

Answer 34 · 2023-11-07T15:16:36.000Z

Same issue here in React Native: 0.71.11

Answer 35 · 2023-11-13T09:16:26.000Z

same issue in 0.72.6

Answer 36 · 2023-11-22T16:26:11.000Z

Same issue with 0.72.7... Unable to have breakpoint working on Flipper with a new project on iOS.

Answer 37 · 2023-12-15T06:56:25.000Z

@jkoutavas Failed to create a new MMKV instance: React Native is not running on-device. MMKV can only be used when synchronous method invocations (JSI) are possible. If you are using a remote debugger (e.g. Chrome), switch to an on-device debugger (e.g. Flipper) instead.

Answer 38 · 2024-01-21T08:21:30.000Z

I have a little same question.I found my breakpoints will not work when I press "R" to refresh my page.

Description

Version

Output of npx react-native info

Steps to reproduce

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

Output of `npx react-native info`