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?

[frozencap]

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.

[yahyamokaied]

[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)
}

[MarkPan726]

The above snippet currently only tests Hermes, the debugger tools support expo by default.

[Anhunghezo]

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

[AndriyFedorovich]

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

[K-Z-D]

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