Plan: New Hermes/RNV8 debugger support

[jhen0409]

Related: #573

I'm started experimenting with support for Hermes debugger (it also works on RNV8) on RNDebugger. The main purpose is we can keep the same debug experience with this tool.

Until recently I started using JSI and planning to support new architecture in my projects. Flipper is awesome tool to help me debug more deeper issues, but it have some performance issue in my use cases, I wish we had something more lightweight & out-of-the-box tool like RNDebugger.

I'll start the related work at August, these are some key support items:

• DevTools

  • Use devtools-frontend on Electron webview (You can see the code of how React Native launch the chrome devtools)

• Enable open in editor in console (docs/enable-open-in-editor-in-console.md)

  • react-native-v8 devtools support the file link so we can still use this feature, but Hermes seems not

• Console REPL

  • Hermes behaves differently between iOS and Android when using the console REPL, I can use it on Android but have some weird problems. It is works well with react-native-v8.

• Network tab

  • Expo has great built-in network inspect support on the devtools, we can see if it is can support pure RN projects

• React / Redux (remotedev) / Apollo Client DevTools support

  • Due it not working on WebWorker, we can't do anything script injection, so it will require additional package setup.

• Storage

  • Redux DevTools has a common interface so we can support any libs not limited to state management. I might implement an one for react-native-mmkv by listeners.

The initial version of new debugger implementation will be included in v0.15. Before this, I'll upgrade dependencies & fix some small issues for "old" remote debugger in v0.14.

I'm currently only spending 10~20% of my workday doing it, so any help or advice would be appreciated.

[AJTJ]

Thanks for working on this.

This apparently works with a bare React Native app: https://github.com/gusgard/react-native-devsettings but I have not been able to get it working with Expo in managed workflow. Which is a pretty large portion of people building with react-native.

[jhen0409]

In my test of Expo 49, you can still use the DevSettings by set "jsEngine": "jsc" in app.json, but I saw some other problems, maybe it could be about Chromium version or React DevTools. It nothing happened on hermes, I would suggest you to report the issue with Expo if you really want it to support trigger remote debugging for hermes again.

Also, I hope we should focus on the new debugger support, the new architecture will also usher in stability, it is time to get rid of old remote debugging.

[simonmaquilon]

It's not neccessary to change the jsEngine, instead enabling Debug mode in the Emulator/Simulator/Device/Expo makes that RND works fine... until your next release.

[jduhking]

I’m sorry if this seems like a dumb question but where is Emulator/Simulator/Device/Expo?

[ice-cap0]

any progress?

[zsomborgellerfi]

Bump🙌

[jhen0409]

There isn't a lot of time available at the moment, and I'm currently focusing less on using the debugger at work (mostly developing for native modules). I hope I'll be motivated to set aside some extra time for that when I switch back to some UI works.

Currently I only do some basic setup on it, you can take a look in the new-debugger branch.

[RobertoJoseph]

I have a question and I don't know If it is related to that or not but after I configured my project with eas build and eas update. the option for Remote Js debugger disappeared and only the Open Debugger option is in the developer menu. Even after clicking on Open debugger, It is not open React native debugger but It opens chrome dev tools one, and I could not debug the redux and all the other stuff. @jhen0409

[eithe]

@RobertoJoseph Probably not the best place for support questions this thread.

[john-mokaied]

[dennzimm]

Just read a little further up the page ...
#774 (reply in thread)

[MarkPan726]

Maybe this is useful:
import { NativeModules } from 'react-native'

if (DEV) {
NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

[kieuhuynhdev]

I have same issue, react native debugger loop on Android

[JimTeva]

thanks @ruibinch for mentioning this and @gusgard for doing the package!!

[bonnmh]

it's not working for me :(

[VisheshG8]

Thank you so much it helps alot , I spend 1 whole day to find the solution

[DenisDov]

This line is the reason for the crash that occurs immediately after the release app opens. In debug mode it's fine.

[fedorovichandrey]

Hi jhen0409, I hope you're doing well! How is it going?

[dzengi]

@jhen0409 Hi. Maybe there is some news? Thank you

[istvan-panczel]

Ahoy,

For anyone who got frustrated with Hermes and the JS debugger in a React-Native app (I use Expo), here is a quick alternative solution for logging out Redux States (I use Redux Toolkit) while we are waiting for actual dev-friendly tools, I use lodash in my project:

const additionalMiddlewaresInDevMode = __DEV__ ? [stateChangeLogger] : [];

const store = configureStore({
  reducer: persistedReducer,
  devTools: false,
  middleware: [saga, ...additionalMiddlewaresInDevMode],
});

import { isEqual } from 'lodash';
import { AnyAction, Dispatch, Middleware, MiddlewareAPI } from 'redux';

/**
 * Logs the differences between two states
 * This function recursively compares two objects and logs the differences between them.
 *
 * @param prevState - The previous state
 * @param nextState - The next state
 */
function logStateDifferences(prevState: any, nextState: any) {
  const differences: { [key: string]: any } = {};

  // Recursively compare objects for differences
  const compareObjects = (prev: any, next: any, path: string) => {
    Object.keys(next).forEach((key) => {
      const currentPath = path ? `${path}.${key}` : key;

      // Check if the key exists in the previous state
      if (!(key in prev)) {
        differences[currentPath] = {
          a_prev: undefined,
          b_next: next[key],
        };
      }
      // Check if the values are different
      else if (!isEqual(prev[key], next[key])) {
        // If the values are objects, recursively compare them
        if (typeof prev[key] === 'object' && typeof next[key] === 'object') {
          compareObjects(prev[key], next[key], currentPath);
        } else {
          differences[currentPath] = {
            a_prev: prev[key],
            b_next: next[key],
          };
        }
      }
    });
  };

  compareObjects(prevState, nextState, '');

  if (Object.keys(differences).length > 0) {
    console.table(differences);
  } else {
    console.log('%cNo State Differences', 'color: cyan');
  }
}

/**
 * Logs the state before and after the dispatch
 * Use this middleware to log the state before and after the dispatch until we get an actually
 * working Redux Devtools for React-native with Hermes as the JS engine.
 *
 * It groups the logs by the action type and logs the state before and after the dispatch.
 * If the states are identical, it logs that they are identical.
 *
 * @param api - The redux middleware API
 */
const stateChangeLogger: Middleware = (api: MiddlewareAPI) => (next: Dispatch<AnyAction>) => (action: AnyAction) => {
  const previousState = api.getState();
  const result = next(action);
  const afterState = api.getState();

  console.groupCollapsed(`%cAction Dispatched: ${action.type}`, 'color: yellow');
  console.log('%cState Before Dispatch:', 'color: orange', previousState);
  console.log('%cAction:', 'color: yellow', action);
  console.log('%cState After Dispatch:', 'color: orange', afterState);

  if (isEqual(previousState, afterState)) {
    console.log('%cStates are identical', 'color: cyan');
  } else {
    console.groupCollapsed('%cState Differences:', 'color: cyan');
    logStateDifferences(previousState, afterState);
    console.groupEnd();
  }

  console.groupEnd();
  return result; // Return the result of the action dispatch
};

export default stateChangeLogger;

An xample of how does it look like on console:

[andrewgraemebrooks]

That you so much for this, this is a great solution to use while waiting for some dev-tools. For anyone else who isn't using TypeScript in their project, here is a Javascript version without the Typescript type annotations:

import { isEqual } from 'lodash';

/**
 * Logs the differences between two states
 * This function recursively compares two objects and logs the differences between them.
 *
 * @param {any} prevState - The previous state
 * @param {any} nextState - The next state
 */
function logStateDifferences(prevState, nextState) {
    const differences = {};

    // Recursively compare objects for differences
    const compareObjects = (prev, next, path) => {
        Object.keys(next).forEach((key) => {
            const currentPath = path ? `${path}.${key}` : key;

            // Check if the key exists in the previous state
            if (typeof prev === 'object' && prev !== null && !(key in prev)) {
                differences[currentPath] = {
                    a_prev: undefined,
                    b_next: next[key],
                };
            }
            // Check if the values are different
            else if (!isEqual(prev[key], next[key])) {
                // If the values are objects, recursively compare them
                if (
                    prev[key] !== null &&
                    typeof prev[key] === 'object' &&
                    next[key] !== null &&
                    typeof next[key] === 'object'
                ) {
                    compareObjects(prev[key], next[key], currentPath);
                } else {
                    differences[currentPath] = {
                        a_prev: prev[key],
                        b_next: next[key],
                    };
                }
            }
        });
    };

    compareObjects(prevState, nextState, '');

    if (Object.keys(differences).length > 0) {
        console.table(differences);
    } else {
        console.log('%cNo State Differences', 'color: cyan');
    }
}

/**
 * Logs the state before and after the dispatch
 * Use this middleware to log the state before and after the dispatch until we get an actually
 * working Redux Devtools for React-native with Hermes as the JS engine.
 *
 * It groups the logs by the action type and logs the state before and after the dispatch.
 * If the states are identical, it logs that they are identical.
 *
 * @param api - The redux middleware API
 */
const stateChangeLogger = (api) => (next) => (action) => {
    const previousState = api.getState();
    const result = next(action);
    const afterState = api.getState();

    console.groupCollapsed(`%cAction Dispatched: ${action.type}`, 'color: yellow');
    console.log('%cState Before Dispatch:', 'color: orange', previousState);
    console.log('%cAction:', 'color: yellow', action);
    console.log('%cState After Dispatch:', 'color: orange', afterState);

    if (isEqual(previousState, afterState)) {
        console.log('%cStates are identical', 'color: cyan');
    } else {
        console.groupCollapsed('%cState Differences:', 'color: cyan');
        logStateDifferences(previousState, afterState);
        console.groupEnd();
    }

    console.groupEnd();
    return result; // Return the result of the action dispatch
};

export default stateChangeLogger;

[saxenanickk]

@jhen0409 Any progress on this?

[liquidvisual]

For anyone on Expo trying to get Redux DevTools to work, there's a temporary solution using a plugin. See here

[losh11]

Is anyone interested in making a front end for @istvan-panczel's hook? Instead of console.logging the diff-ed redux state, it's sent to an observing front end app that makes it look all pretty like react-native-debugger?
TBH the loss of being able to see the current redux state + state changes has been a massive pain when debugging.

[istvan-panczel]

I recently had a similar idea!

In addition to using the state logger, I implemented HTTP interceptors to log every request and response, including headers, data, and timestamps. I also added loggers at the DB layer and subscribed to screen changes so that each time a screen is loaded, its name and route parameters are logged.

With these enhancements, I feel confident in my ability to debug any issue in my current contract project. By navigating the app and interacting with it, I can easily see detailed logs. Each type of log has distinct colors and formatting, is expandable, and can be inspected thoroughly. These logging points also facilitated the integration of Sentry into the project.

I'm considering developing a separate application to run locally, which would replace console logging with simple HTTP requests to this app. The idea is to have a small database to store all logs and a user-friendly UI to visualize the state, changes, and activities at the DB and network layers. Although I haven't extensively used the "time-travel" features of the Redux debugger, implementing a feature to apply a specific state to the store of your app at any action point (before or after) seems quite feasible.

[aliffazfar]

Can checkout this 774#discussioncomment-10095554 if you miss the redux time-travel debugging on Hermes

[sigaits]

Since I updated to Expo 50, I have had this problem: if I reload the app while the dev-tools is running, the app crashes on the simulator (as in quits and I have to relaunch it). It only started happening since Expo 50 but it's been a while since I updated and still having the same problem. Is anyone else having this issue?

[DePavlenko]

it might be connected to react-native-reanimated v3.0 and higher
software-mansion/react-native-reanimated#4783

[misbell]

I guess this project is dead in the water, if it can't support Hermes, and there are not updates about it. Too bad, I used it all the time.

[Ahmed-M-Osman1]

Any update guys?

[aliffazfar]

For those who miss Redux DevTools for time-travel debugging and live editing, I’ve managed to make it work for React Native with the Hermes engine.

Checkout my repo: https://github.com/aliffazfar/redux-devtools

The only thing we miss is the network inspector in Chrome, like in the old days. However, we can move on with Reactotron, which works really great for debugging the network, AsyncStorage, and logs.

I have tested and can confirm that RocketSim also work great with React Native to inspect the network. Check this out: https://x.com/AliffAzfar/status/1814121783303569838

[rzfzr]

Does it work with expo?

[losh11]

hey @aliffazfar I'd like to try your fork of redux-devtools. Are you planning to maintain it? If so, can you enable github issues on the repo? Also do you have documentation for RTK (redux toolkit) as the redux documentation strongly reccomends using RTK over the older way.

[eithe]

If you guys haven't seen it you should take a look at https://www.youtube.com/watch?v=b48Lax2-jOQ&t=4350s which was presented a few weeks ago. They are hoping to add redux support for it later, but it will be available without it from 0.76.

[aliffazfar]

hey @aliffazfar I'd like to try your fork of redux-devtools. Are you planning to maintain it? If so, can you enable github issues on the repo? Also do you have documentation for RTK (redux toolkit) as the redux documentation strongly reccomends using RTK over the older way.

You can use official documentation to debug RTK. My fork was only enabling it for those who wanted to debug with hermes engine.

[aliffazfar]

Does it work with expo?

Expo has much better debugger with hermes engines.

[c-goettert]

I just want my redux debug tools back. Bring em baack please 😭

[Matthew-Jimenez]

We should really add https://github.com/gusgard/react-native-devsettings to the readme.

[herujest]

it's 2025 any update?

[TonyFTannous-Byd]

did not work with the new architecture (react native 0.76.6), react native debugger app not working
any news!!!

[gusgard]

You should use this now

https://reactnative.dev/docs/react-native-devtools

[bfd-paul-vicknair]

As far as I can tell, that doesn't handle the redux or network pieces. Otherwise it appears to be pretty great.

[TonyFTannous-Byd]

@gusgard @bfd-paul-vicknair
Hi
i am using it, but i need react native debugger app to handle redux or network. but it ok i replaced it by reactotron

[kaanmertkoc]

reactotron is so worse. UI/UX is terrible.

[sLurPPPeRsTaR]

reactotron is so worse. UI/UX is terrible.

the only thing you can rely on that debugger is storybook the rest is bad experience

[sLurPPPeRsTaR]

react native debugger unreplaceable

[nikilarigela]

Hey @jhen0409 any update on new dubgger?

[ferchomuri]

Can I help u? @jhen0409

[manish-mahto-982]

why network section is not showing in react-native devtools

[liamjones]

It's not implemented yet: react-native-community/discussions-and-proposals#819

[CodeByRahulSaini]

Hello all,
Looks like the CallStack team solved it for all of us and built Rozenite which works with existing React Native Devtools — and a plugin framework that brings a clean, extensible plugin system in React Native DevTools.

• Official plugins already available: Redux DevTools, TanStack Query, network activity monitoring, performance marks & more.
• Works with Expo + bare RN, and lets you build custom plugins for your own use cases.

Surprisingly, most people still don’t know this exists — worth checking out!

🔗 https://www.rozenite.dev/
🎥 https://www.youtube.com/watch?v=J0rXmTIGGRk

Would love to know what the community thinks about this.

[safin-intangles]

Yes but there are still issues. I recently set it up and ended up wasting time as it wasnt working with my current workflow using saga, dynamic-redux-modules.

[CodeByRahulSaini]

That looks like a special use case. Feel free to add an issue here -> https://github.com/callstackincubator/rozenite

[safin-intangles]

Have already added long back, no response yet. callstackincubator/rozenite#160

[Zergus-s]

God bless you for this info! Suffered with Tanstack Query and Axios debugging on Expo, now with Rozenite it works perfectly both network and cache!
Much better than Reactotron

[sharanagouda]

temporary work around

🚀 Built ReactoRadar — an open-source React Native Debugger for RN 0.74+ / Hermes / New Architecture

The old React Native Debugger doesn't support Hermes. Flipper is deprecated. So I built a modern replacement from scratch.

What it does:

• Console — collapsible object trees, multi-select level filters, Cmd+F find in logs, Redux actions inline
• Network — Chrome DevTools-style with resizable/sortable columns, Copy as cURL, throttling (3G/Offline)
• Redux — time travel with store diff showing exactly which keys changed (old → new values)
• GA4 Events — intercepts ALL Firebase Analytics methods, event list with parameters, summary chips
• AsyncStorage — live key/value browser with search
• 9 Themes — Dark, Light, Monokai, Dracula, Solarized, Nord, GitHub Dark, One Dark

2 commands to get started:

npx reactoradar setup    ← from your RN project
npx reactoradar           ← launch the debugger

That's it. No config, no native modules. Auto-detects your platform, patches index.js, wires Redux, intercepts Firebase Analytics.

Also available as a .dmg download for macOS.

📦 npm: https://www.npmjs.com/package/reactoradar
💻 GitHub: GitHub - sharanagouda/react-native-debugger: Standalone macOS debugger for React Native 0.74+ with H…
📥 Download: Releases · sharanagouda/react-native-debugger

Contributions welcome — looking for help with Windows/Linux support and profiling tools.

Give it a try and share your feedback! 🙌

#ReactNative #JavaScript #MobileDevelopment #OpenSource #DevTools #Debugging #Hermes #iOS #Android #Firebase #GA4 #Redux

[istvan-panczel]

At this point the whole thing is solved now.

I upgraded the app to expo 56 with all its dependencies and the official plugin works. With latest RN, Hermes, etc.

https://docs.expo.dev/debugging/devtools-plugins/

https://github.com/reduxjs/redux-devtools

[maahibhama]

I’ve been building PulseRN, an open-source, local-first desktop debugger for React Native.

It brings console logs, network requests, Redux actions, navigation events, performance signals, storage, and errors into one chronological timeline. The idea is to help developers understand the complete sequence behind a bug instead of switching between several disconnected tools.

It also includes:

• Hermes debugging with original TypeScript sources
• Breakpoints, scopes, watches, stepping, and evaluation
• Expo development-build and bare React Native support
• Configurable redaction and bounded local storage
• MCP integration for evidence-backed debugging with Codex, Claude, Cursor, and other compatible clients
• Desktop builds for macOS, Windows, and Linux

GitHub: https://github.com/maahibhama/PulseRN
Documentation: https://maahibhama.github.io/PulseRN-Site/

I’d really appreciate feedback from React Native developers:

• Does the unified timeline solve a problem you experience?
• Which debugging integration would be most useful to you?
• Is the installation and SDK setup clear?
• What would prevent you from trying this on a real project?

PulseRN is still actively evolving, so honest feedback, bug reports, and contributions are very welcome.