Debugger integration

July 20, 2023 · View on GitHub

The Debugger worker is referenced from react-native debugger-ui, so it's only working if you're enabled Debug JS Remotely, you can debug your app in Chrome Developer Tools, we keep the following tabs:

  • Console
  • Sources
  • Network (Inspect Network requests if you are enabled Network Inspect)
  • Memory

Multiple React Native packager (custom port) support

We can use react-native-debugger-open package to detect RN packager port, it will open an another window automatically if another debugger workers are running.

If you don't use the npm package and want to change port, click Debugger -> New Window (Command⌘ + T for macOS, Ctrl + T for Linux / Windows) in application menu, you need to type an another RN packager port. The default port is use Expo (and create-react-native-app) default port.

For macOS (10.12+), it used native tabs feature, see the support page for known how to use and setting.

Debugging tips

Global variables in console

When you enabled remote debugging, RNDebugger should switched context to RNDebuggerWorker.js automatically, so you can get global variables of React Native runtime in the console.

  • $r: You selected element on react-devtools.
  • showAsyncStorageContentInDev() - Log AsyncStorage content
  • $reactNative.* - Get react-native modules. For example, you can get $reactNative.AsyncStorage

Enable Debug Remotely programmatically

For enable Debug Remotely without using dev menu, you can use the built-in DevSettings native module:

import { NativeModules } from 'react-native'

if (__DEV__) {
  NativeModules.DevSettings.setIsDebuggingRemotely(true)
}

If you're using Expo, you can still use the method, but it probably only works with jsEngine: jsc in app.json, jsEngine: hermes may not works.

Other documentations