[0.73] Remote JS Debugging deprecation #734
Replies: 5 comments 17 replies
-
|
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.
-
|
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.
-
|
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 |
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.
-
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.
-
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) ===== 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? Thank you. |
Beta Was this translation helpful? Give feedback.
-
|
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ó:
… @rizzafer <https://github.com/rizzafer>, 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
<https://github.com/user-attachments/files/16318364/react-native%2B0.73.6.dev.patch>
OR patch yourself with Patching Yourself instructions below.
2. Add react-native-devsettings
<https://www.npmjs.com/package/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)
<https://github.com/user-attachments/assets/cc6f64e3-ccff-45c0-9d90-894ad93dd0da>
The result should look like the file I have attached.
—
Reply to this email directly, view it on GitHub
<#734 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AFQ73PKNO24V53AZKVQZBYLZNG7PTAVCNFSM6AAAAABKBUARAGVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTAMBWGY4TOOI>
.
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.
-
|
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, |
Beta Was this translation helpful? Give feedback.
-
|
if we include this ''// import NativeDevSettings from 'react-native/Libraries/NativeModules/specs/NativeDevSettings'; |
Beta Was this translation helpful? Give feedback.
-
|
try this |
Beta Was this translation helpful? Give feedback.
-
Introduction
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.
Motivation
We are focusing future debugging efforts into providing a first-class experience for Hermes.
Alternatives
Discussion points
Beta Was this translation helpful? Give feedback.
All reactions