It takes effort to stay on latest React Native version and if you are like me the recent improvements to the React Native DevTools has left you envied.
Well wait no longer, I found out a way to use latest DevTools without needing to upgrade React Native.
Disclaimer
This is a hack and not how the internal React Native DevTools is supposed to be used. Use it at your own risk and don’t expect anything from the RN Core team. We have been warned that this might break.
Forcing Resolution
Ever since version 0.73 the React Native Core team split out the logic related to the DevTools as its own package. Great job by the way!
The split out package is very well contained and has worked well with different versions of React Native. Therefore you can be on version 0.79 and still use the debugger from version 0.83 by forcing resolution.
In your package.json file force resolution for @react-native/dev-middleware and @react-native/debugger-frontend:
{
"resolutions": {
"@react-native/dev-middleware": "0.83.0",
"@react-native/debugger-frontend": "0.83.0"
},
"resolutionComments": {
"@react-native/dev-middleware": "Forcing resolution to use latest Chrome DevTools.",
"@react-native/debugger-frontend": "Forcing resolution to use latest Chrome DevTools."
}
}Expo
On Expo you want to set the env variable REACT_NATIVE_DEBUGGER_FRONTEND_PATH to point to node_modules/@react-native/debugger-frontend/dist/third-party/front_end/.
If this is correct you will see expo start log the following message:
Using custom debugger frontend path from process.env.REACT_NATIVE_DEBUGGER_FRONTEND_PATH: ../../../node_modules/@react-native/debugger-frontend/dist/third-party/front_end/That’s it. Enjoy the more stable React Native DevTools!
Is It Stable? (UPDATE)
No, we have been warned by Alex Hunt that this is likely to break between React Native versions that received updates to the internal C++ backend code that integrates/implements the Chrome Debugger Protocol. They might eventually add a version constraint check.