[0.79] Removal of Remote JS Debugging via Chrome

[huntie]

Summary

🚨 Key change: Remote JS Debugging will be removed in React Native 0.79 (ETA: April 2025).

Why it matters: Older debugging integrations will no longer be supported.

• Back in 0.73, we prepared users by deprecating Remote JS Debugging and removing it from the Dev Menu.
• Recommended migration:
  • Users should use React Native DevTools, and optionally Expo DevTools Plugins for popular third party integrations.
  • Community projects that extend debugging functionality should migrate to our modern CDP backend.

Why now? This follows:

• Expo’s removal of this capability in SDK 52.
• The launch of the New Architecture by default in React Native 0.76, which is incompatible with Remote Debugging.
• The availability and stability of Expo DevTools Plugins as a modern method to access 3P developer tool integrations.

Motivation (recap)

The big picture: Debugging has been historically bad due to fragmentation. Our strategy is modern JavaScript debugging over CDP, which is stable since 0.76.

• Remote Debugging was fundamentally broken: Remote Debugging does not debug code on the device, instead constructing a separate V8 process in Chrome. This method was unreliable, and is incompatible with the New Architecture.
• Reducing surface area: There is a cost to maintaining this legacy feature, particularly with code references across React Native's lifecycle concepts. We're continuing to invest in debugging, by focusing on our new tooling.

Impact and alternatives

Use React Native DevTools

React Native DevTools is our default debugging experience since 0.76. It is more deeply integrated and fundamentally more reliable than previous debugging methods in React Native.

See Opening DevTools.

Third party plugins and react-native-debugger

React Native DevTools launched with an intentionally minimal feature set that excludes plugins, although highly requested.

• We encourage developers to move to standalone flows for popular use cases, which work alongside the React Native DevTools backend.
  • Expo DevTools Plugins
  • Dev Tools in Radon IDE
  • Additionally, in the case of Redux DevTools, manual integration via a WebSocket client and @redux-devtools/cli.
• The react-native-debugger community project will be left behind, if not migrated off Remote Debugging.
  • Unfortunately, this has not been updated since Jul 2023.
  • This project hasn't migrated to React Native’s modern CDP debugger protocol — available for the last 4 years via Hermes, and now the React Native DevTools backend. We note that there is a WIP, but stale effort to migrate:
    • Plan: New Hermes/RNV8 debugger support jhen0409/react-native-debugger#774
• Finally, in the future, we are tentatively exploring dev plugin support within React Native DevTools. If successful, this would become the first time we've offered first party support for 3P developer tools in React Native.

[piaskowyk]

This would be incredibly useful for enabling the new Static Hermes in React Native also, as the remote debugger is a blocker for that!

[huntie]

Ah, well, Remote JS Debugging ≠ Legacy Hermes CDP Debugger, unfortunately 😅. The two are separate.

[piaskowyk]

Interesting! I didn't know that. Do you know of any articles or sources of information that describe the differences between the Legacy and non-Legacy CDP Debugger?

[huntie]

There's my talk at React Universe — but the gist is the Legacy CDP Debugger was Hermes' previous built-in support. i.e., everything used pre-0.76. Post 0.76, this is inaccessible (remains in Hermes), and was hard-replaced with the React Native DevTools backend.

[huntie]

We're looking at usage stats and possible options to accelerate the removal currently. (Again, the Legacy CDP Debugger is being depended on only at Meta in legacy apps.)

[piaskowyk]

Thank you for all the information!

[Kajanan02]

Is it support API request and Monitoring??

[habasa]

Are there any updates for the network panel yet??

[huntie]

#819 (comment)

[skoolaidl]

Having issues with the debugger for both Android and iOS. Console not logging any output. All tabs empty except for Components tab. Launches just fine no errors. Using RN 0.79.3. Can provide whatever info needed. Things I have done:

• Ensured Hermes is enabled.
• Ensured not running as production.

[huntie]

Interesting, looks like the Console panel is completely b0rked.

• First: This is the thread about Remote Debugging, not React Native DevTools!  — please confirm how you're launching the debugger and configuring your app!
• Try force-refreshing the frontend within DevTools (View > Force Reload This Page).
• Can you look at Protocol Monitor and share if you're seeing any Console.messageAdded events?

[skoolaidl]

Well, I woke up and it's working. Not a thing was changed. For reference, this issue is for React Native DevTools being launched via metro.

[robsco]

Is there any way to view the console from devtools on a remote browser?

My main machine is a linux desktop, I develop and run on a mac, but hate having to use remote desktop simply to view the devtools window.

I only rely on the console, is there any way to view this in a browser on my linux machine?

[liamjones]

There was some discussion over here about connecting to the devtools remotely that might help, I'm not sure where they got to with how doable it was: #819 (comment)

[robsco]

Thanks, that worked perfectly.

Disabled middleware headers in node_modules/@react-native-community/cli-server-api/build/securityHeadersMiddleware.js

Use this to find the app instance ID: http://x.x.x.x:8081/json

Then plug the websocket info/device ID into http://x.x.x.x:8081/debugger-frontend/rn_fusebox.html?ws=%2Finspector%2Fdebug%3Fdevice%3DXXXXXXXXXXXXX%26page%3D1&sources.hide_add_folder=true