Hermes support

[Ashoat]

Hey, I just wanted to check to see if there's any interest / work on Hermes support for the React Native Debugger. The React Native team's work on JSI is still in progress, but once that is launched the approach of running the JS thread remotely won't work anymore, since JSI relies on having shared memory access between the JS thread and the native thread, which isn't possible when the two threads are running on different hosts.

The way that the React Native team is looking to address this is with Hermes, their custom JS runtime. JSI works with both Hermes and JSC, but the Hermes team has implemented the Chrome inspector protocol for Hermes, which allows the Chrome debugger running on a laptop to communicate with the Hermes runtime running on a device.

It's also possible to debug Apple's JSC through Safari, which IIRC relies on a similar "remote inspection" approach. It probably won't be easy to integrate with RND though, since RND is based on the Chrome toolset.

Given that context, it seems like the best way forward for RND to work with JSI is through Hermes. The link above explains how to get the Chrome debugger working with Hermes – I'm guessing that something similar can be done to get RND working with Hermes.

[madandrija]

If this isn't done, I'm not sure there will be any use for RND since apps crash when they touch code that uses TurboModules

[rusakovic]

It's the most important feature for implementing. All of us will be glad to see your best react native debugger with Hermes. Flipper - is a bull shit in comparison with your debugger!!

[pavermakov]

@rusakovic I'm glad I'm not the only one who can't stand flipper. Too bad flipper is now shipped and installed by default.

[minhchienwikipedia]

Same to me, I hope we can use RN Debugger for it, I don't want to use Flipper, it's too bad, it's hard to use, too much setup...! I hope you guys can do it ASAP, thank you guys for what you did!

[minhchienwikipedia]

I found it, we can use Reanimated 2 with React Native Debugger until version 2.3.0-alpha.2 (suggest using version 2.3.0-beta.2 for now) or you can wait for official version, this is only a beta version https://github.com/software-mansion/react-native-reanimated/releases/tag/2.3.0-alpha.2 - Added chrome debugger support

[msageryd]

This would be awesome! I have had a couple of weeks with Flipper. I thought Flipper was the new way to go. I even uninstalled RND, since I couldn't run it with Hermes anyway. Flipper has some nice features, but it's soo slow. Debugging Redux actions with Flipper is a PITA.

I have now reinstalled RND and will go back to V8 until RND supports Hermes. My thumbs up for this feature.

[mikeduminy]

How would this be accomplished in theory?

[imisshtml]

Yes, this would be helpful. Flipper is really horrible and on my machine it takes up too much processing power.

[vmechiev]

I hope u will implement hermes support, guys, because I don't want to use Flipper, bcs it is difficult to configurate and not so convinient as your tool.

[Ashoat]

If somebody is interested in adding a Flipper plugin with support for the Redux debugger, let me know. I don't currently have the cycles to work on it, but I have pretty good context on the problem and what it would take to solve it.

[Nantris]

This just shot to the top of my wishlist when Flipper decided it wasn't going to work on any of my machines or projects one day...

[klitko13]

Up

[alex-mironov]

Are there any plans to make it working with Hermes? Starting from RN 0.70 it's a default option so this feature is critical.

[Reactor-Labs]

I'm using Reactotron and Flipper and both seem to be good options

https://github.com/infinitered/reactotron

https://fbflipper.com/

[HanggiAnggono]

I'm using Reactotron and Flipper and both seem to be good options

https://github.com/infinitered/reactotron

https://fbflipper.com/

is it possible to use reactotron without integrating with our project directly?

[Reactor-Labs]

@HanggiAnggono here is the quick start for react native https://github.com/infinitered/reactotron/blob/master/docs/quick-start-react-native.md but to answer your question you have to integrate it with your project, thought it doesn't run in production.

[kvlknctk]

If an advanced console log output is made for reactotron, the others are not needed much. you may just need a simple browser to open an advanced debugger. webstorm handles this nicely. There is no need to deal with such nonsense. Decisions that will affect the workspace environment of many software developers are taken and are made without asking anyone. This issue bothered me a lot.

[Nantris]

For anyone using Expo, SDK 47 beta supports Hermes debugging without relying on Flipper.

[Ashoat]

Expo 47 is a gamechanger!! So exciting to have debugger lines working again for the first time since switching to Hermes.

With this change, wondering – is there any way to get react-native-debugger working with Hermes through Expo?

[clayrisser]

@Ashoat I have the same question. I am holding off switching to hermes because I'm waiting for rnd support for hermes in expo.

[toplac]

Any update on this Issue?

[Nantris]

@clayrisser I very much doubt it's ever happening.

[albanx]

+1 React native debugger supports network request out of the box, and more important it has a Redux plugin integrated which really helps a lot to create the app and debug

[jalvarson]

+1 Really need this.

[Nantris]

To everyone saying they really need this - you probably don't. Why do you need it?

I am not a maintainer, but I want to reiterate how exceedingly unlikely it is that this will happen. This package is currently based on a version of Electron that is 10 behind the oldest still-supported version, and integrating Hermes is a big ask when there are other comparable tools now that did not exist when this project began.

[davidtiede]

To everyone saying they really need this - you probably don't. Why do you need it?

I am not a maintainer, but I want to reiterate how exceedingly unlikely it is that this will happen. This package is currently based on a version of Electron that is 10 behind the oldest still-supported version, and integrating Hermes is a big ask when there are other comparable tools now that did not exist when this project began.

The main reason for me is that Flipper is not compatible with @react-native-firebase/app, so right out of the box I'm without a debugger. Chrome://inspect seems nothing more than a familiar console and react-devtools works fine for inspecting react components / state, but both of these tools lack a network inspector (as far as I can tell). If react-native-debugger supported Hermes, debugging network requests would be possible.

If react-native-debugger is not needed.. how is everyone else inspecting network requests? 🧐

[Nantris]

@davidtiede that's fair - but I wouldn't get your hopes up that this will ever happen.

If somebody needs it, it's likely they're going to have to be the one to figure it out and submit a PR. This issue has been open for years as releases of the project become more infrequent and the maintainers have never replied to this issue.

[davidtiede]

@Slapbox no I'm sure you're right.. It's a bit frustrating coming from the web world where DevTools are the standard, but mobile debugging seems like an after thought. I'll just console.log everything for now.

[Nantris]

I've waited for over 3 years thinking mobile development would stop sucking any day now - but it just hasn't materialized sadly.

[Ashoat]

At Comm we've set up react-devtools, redux-devtools, and JS debugging via expo-dev-client without Flipper. It all works with Hermes, and we're able to fully replace all of the functionality in react-native-debugger with this stack.

Unfortunately it does require a lot of project configuration, and we don't have the cycles right now to package it into a standalone project like react-native-debugger. That said, our codebase is open source: https://github.com/CommE2E/comm

[gusgard]

I'm using react-native-debugger with Hermes and Firebase, could you try https://www.npmjs.com/package/react-native-devsettings?activeTab=readme?

Related to: https://github.com/jhen0409/react-native-debugger/issues/755

[jaexplorer]

@gusgard trying now

[jaexplorer]

@gusgard Omg I love you this works.

[youwasborntodo]

I hope that 100 years later, my great-grandson will tell me during the Qingming Festival: RND can supported hermes

[jncampbell]

We could really use some communication regarding if this is on the table or not. This tool no longer works with any react native versions that use the default hermes engine. It's totally fine if support is not on the horizon but I think that should be communicated so folks can look for (or build) more future-proof solutions.

[Ashoat]

At App.js earlier this month, a Meta engineer presented an upcoming version of Metro that supports the Chrome DevTools Protocol. No guarantees on react-native-debugger support working naturally with that, but it's at least a positive development, and should unblock react-native-debugger compatibility.

At Comm we're still using expo-dev-client for debugger support and react-devtools / redux-devtools directly. It works fine, and you can check out our repo here.

[jhen0409]

Sorry for being late, I'll close this first. I created a new discussion about this, if you want to know any news about Hermes debugger support (related JSI / Fabric / New Architecture) in RNDebugger, you can follow https://github.com/jhen0409/react-native-debugger/discussions/774. Also, any help or advice would be appreciated.