Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/react-native-community/discussions-and-proposals/discussions/734 below:

[0.73] Remote JS Debugging deprecation · react-native-community/discussions-and-proposals · Discussion #734 · GitHub

• Pricing

Nov 17, 2023 · 6 comments · 18 replies

-

In React Native 0.73, we are deprecating Remote JavaScript Debugging via Chrome (docs).

Remote JavaScript Debugging was previously the default debugging experience for apps using JavaScriptCore (JSC). It involves switching JavaScript execution into an external V8 process, to debug in the Chrome browser.

• The model of switching JS execution into a separate V8 process is inconsistent with how users' apps actually run. Things such as interactions with Native Modules were in a broken state. In particular, we noticed Remote JS Debugging being incompatible with the New Architecture.
• As the React Native team continues to invest in improving debugging, we want to reduce the surface area of debugging modes that we support.

We are focusing future debugging efforts into providing a first-class experience for Hermes.

• We recommend using Hermes for a consistent debugging experience on all platforms. See all supported debugging methods under Opening the Debugger.
• We recommend Safari Developer Tools (direct JSC debugging) instead, for iOS apps using JSC.

• How does this impact third party tooling (which might inform our removal timeline).
• General feedback.

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

-

I welcome this change very much! Many developers I interacted with didn't even realize that "remote debugging" is running V8 instead of the device's JS engine (I guess the notion of a "JS engine" is also foreign to many developers). And they only learned the difference after bumping into a date issue between JSC and V8 to something of that sort

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

1 reply

-

I agree; I think the new RN JS Inspector will be a much better DX than the remote JS Debugger.

But -- I did appreciate having the Remote JS Debugger as an option. It did help me solve some things in the past! Just time for it to go I think.

Beta Was this translation helpful? Give feedback.

-

It's great that the future debugging experience looks bright. But deprecating the remote debugging has caused a lot of pain. There are posts all over from folks having no way to use the classic redux-devtools and react-native debugger. Yes, I am aware remote debugging can be turned back on manually, but then there are bugs blocking people from doing so. The fixes may be "easy", but clearly not easy enough because I just joined a team of 30 RN devs who didn't even realize it was still available. And also... for such critically important functionality, its confounding that we have to use patch package to get it working again (re async Hermes error).

The experimental debugger has not been an acceptable substitute. I have a little logger that pretty prints colored objects. I've been using it for years in chrome console. It won't work because the experimental debugger has a bug that prevents pretty printing JSON.stringified objects. So in addition to there being major functionality missing, like network calls, it still struggles with a basic console.log.

And Flipper was not a good choice for a hold-me-over, considering it's deprecated too and the reasons for which it is deprecated. I am happy to see it go... except what the heck? What are we supposed to use? Reactotron?

Redux devtools and react-native-debugger are insanely useful. Maybe not as pretty as the competition, but something many of us relied on heavily because it just does what it does perfectly. It is without equal. To have that taken away, we feel we have been left hanging... It really is surprising too, when I think of how many major commercial decisions must have been made to go with redux because of those devtools.

My point in saying all this is not to offend anyone. If anything, I am appreciative of the opportunities RN has provided me in my career. But it is to say I think the impact of deprecation has been greatly underestimated and it would be really unfortunate if remote debugging was taken out a second before it absolutely has to be. If anything, it should be restored to previous health until the new tooling is mature. It doesn't seem like much work would be required to do so.

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

13 replies

-

In my solution above, I forgot a step. You need to add patch-package to your dependencies and also add a post-install script that applies the patch after running npm install/yarn. Try the above solution again, but with the added step.

Beta Was this translation helpful? Give feedback.

-

This solution worked in case of android. For iOS it's not working.

Beta Was this translation helpful? Give feedback.

-

It didn't work for me!... My error is with reanimated conflicting with the use of drawer-navigation.
react native 0.74.3 , react-native-reanimated 3.6.1, @react-navigation/drawer:6.6.3.
The application works perfectly, but when activating the remote debugger it generates an error in reanimated, specifically in the _updateJs method with the legend 'cannot convert null or undefined in object'
If anyone can help me I would greatly appreciate it, I have been dealing with this for days.

Try and additional patch with this fix:

https://github.com/software-mansion/react-native-reanimated/pull/6437/files

Beta Was this translation helpful? Give feedback.

-

This solution worked in case of android. For iOS it's not working.

An error like would be helpful

Beta Was this translation helpful? Give feedback.

-

@jehillert It actually worked after few retries in iPhone 15 simulator. Thanks!

Beta Was this translation helpful? Give feedback.

-

Hello, I am a beginner in React Native and currently developing an app with it. I heard that the remote debugger is being deprecated, so I tried to check for memory leaks using the Xcode Instruments Leaks template, but encountered an issue.

My development environment includes:

React Native version 0.74.2 (without the new architecture)
Xcode version 15.2 for debugging
I created a simple example component and repeatedly mounted and unmounted it using state on a screen. However, no leaks were detected by the Xcode Instruments Leaks template.

==========

import React, {useEffect, useState} from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

export interface MemLeakProps {
  /** debug mode */
  isDebug?: boolean;
}
export const MemLeakSetInterval: React.FC<MemLeakProps> = ({
  isDebug = false,
}) => {
  if (isDebug) {
    console.log();
    console.log('<===MemLeak===>');
    console.log();
  }

  const [count, setCount] = useState(0);
  console.log('now count:', count);

  useEffect(() => {
    console.log('+++ MemLeak mount!');
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1);
    }, 1000);

    return () => {
      console.log('--- MemLeak unmount!');
    };
  }, []);

  const handleButtonClick = () => {
    console.log('button touched!!');
  };

  return (
    <View>
      <Text>{count}</Text>
      <Text>Memory leak component</Text>
      <View style={{marginTop: 15}}>
        <TouchableOpacity onPress={handleButtonClick}>
          <Text>Click me</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {width: '100%', flexDirection: 'row'},
});

====================

Is this behavior normal? Could you provide a simple example code to test if memory leaks are correctly detected in Xcode Instruments?

Additionally, what is the appropriate debugging method to accurately find and trace the location of intentional memory leaks in a React Native memory leak example?
(e.g., using Hermes with Chrome DevTools, Xcode Instruments, etc.)

Thank you.

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

0 replies

-

Hi John... My partner tried it but it didn't work. He responded in the post. Maybe you have another idea. Many thanks!!! Fernando. El vie, 19 jul 2024 a las 22:55, John Hillert ***@***.***>) escribió:

<

>, this solution should work. Let me know if it does not. Fix Bug & Enable RND-Debugger 1. Use this patch file: react-native+0.73.6.dev.patch <

> OR patch yourself with Patching Yourself instructions below. 2. Add react-native-devsettings <

> to your project: yarn add react-native-devsettings // OR npm install react-native-devsettings 4. Add the following import to your App.tsx component (or equivalent) // App.tsximport 'react-native-devsettings'; Then when you run your app: 1. Start react-native-debugger. 2. In your terminal, press 'd' to show the dev menu in your app. 3. Select remote debugging at the bottom. React native debugger should start working. Patching Yourself 1. In your editor, open project_root/node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js 2. Replace this code: callNativeSyncHook( moduleID: number, methodID: number, params: mixed[], onFail: ?(...mixed[]) => void, onSucc: ?(...mixed[]) => void, ): mixed { if (__DEV__) { invariant( global.nativeCallSyncHook, 'Calling synchronous methods on native ' + 'modules is not supported in Chrome.\n\n Consider providing alternative ' + 'methods to expose this method in debug mode, e.g. by exposing constants ' + 'ahead-of-time.', ); } this.processCallbacks(moduleID, methodID, params, onFail, onSucc); return global.nativeCallSyncHook(moduleID, methodID, params);} with this code: callNativeSyncHook( moduleID: number, methodID: number, params: any[], onFail: ?Function, onSucc: ?Function, ): any { this.processCallbacks(moduleID, methodID, params, onFail, onSucc); if(global.nativeCallSyncHook) { return global.nativeCallSyncHook(moduleID, methodID, params); } } 6. Run the following command in your root directory from your terminal: npx patch-package react-native 7. Rename the file to include '.dev' before 'patch' so that it isn't applied in production: image.png (view on web) <

> The result should look like the file I have attached. — Reply to this email directly, view it on GitHub <

>, or unsubscribe <

> . You are receiving this because you were mentioned.Message ID: <react-native-community/discussions-and-proposals/repo-discussions/734/comments/10066979 @github.com>

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

2 replies

-

Hi rizzafer, I need a little more details than "it didn't work". any error logs? Can he post a repo I can look at?

Beta Was this translation helpful? Give feedback.

-

Hi again,
In my solution above, I forgot a step. You need to add patch-package to your dependencies and also add a post-install script that applies the patch after running npm install/yarn. Try the above solution again, but with the added step.

Beta Was this translation helpful? Give feedback.

-

if we include this ''// import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings';
NativeDevSettings.setIsDebuggingRemotely(true);
in archive for ios it gives crash

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

1 reply

-

try this

if (__DEV__) {
    const NativeDevSettings = require('react-native/Libraries/NativeModules/specs/NativeDevSettings').default;
    DevSettings.addMenuItem('title', () => {
         NativeDevSettings.setIsDebuggingRemotely(true);
    });
}

Beta Was this translation helpful? Give feedback.

-

Is it normal not being able to see the response?
Even though the application actually received, it displays some error message on devtools.

Beta Was this translation helpful? Give feedback.

You must be logged in to vote

1 reply

-

The Network panel is not currently supported by React Native core — is this screenshot from a browser or from Expo?

(As it happens, the incoming Network panel support later this year will support this feature ✅)

Beta Was this translation helpful? Give feedback.

Heading

Bold

Italic

Quote

Code

Link

Numbered list

Unordered list

Task list

Attach files

Mention

Reference

You can’t perform that action at this time.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4