Skip to content

Latest commit

 

History

History
56 lines (39 loc) · 2.71 KB

debugger-integration.md

File metadata and controls

56 lines (39 loc) · 2.71 KB
Raw

Debugger integration

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
  • require(...) (RN < 0.56) or $reactNative.* (RN >= 0.56) - Get react-native modules. For example, you can get $reactNative.AsyncStorage

[iOS only] Force your app on debug mode

For enable Debug Remotely in real device, you may fatigued to shake device to show developer menu, you can use the built-in DevSettings native module on iOS:

import { NativeModules } from 'react-native'

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

// For RN < 0.43
if (__DEV__) {
  NativeModules.DevMenu.debugRemotely(true)
}

Other documentations