This is a standalone app for debugging React Native apps, it's based on the official Remote Debugger, and includes React Inspector / Redux DevTools.

The prebuilt binaries can be found on the releases page.

For macOS, you can use Homebrew Cask to install:

$ brew update && brew cask install react-native-debugger

You must make sure all http://localhost:8081/debugger-ui pages are closed, then open the app to wait state, and reload JS with your simulator / device.

Also, you can use react-native-debugger-open, it can:

• Replace open debugger-ui with Chrome to open React Native Debugger from react-native packager, saving you from closing the debugger-ui page everytime it automatically opens :)
• Detect react-native packager port then send to the app, if you launch packager with custom --port, this will very useful

• React Native >= 0.21.0
• React Native for macOS (formerly react-native-desktop) >= 0.8.7
• React Native for Windows (need to remove setupDevtools.windows.js)

The Debugger part is referenced from react-native debugger-ui.

The React Inspector is used react-devtools-core/standalone, it will open a WebSocket server (port: 8097) to waiting React Native connection.

• If you're debugging via Wi-Fi, you need to edit setupDevtools.js of React Native, change 'localhost' to your machine IP.
  • <= 0.30 - Change localhost of Libraries/Devtools/setupDevtools.js#L17
  • >= 0.31 - Add hostname = 'your IP' to next line of Libraries/Devtools/setupDevtools.js#L20-L23
  • >= 0.37 - The same as above, but the path is changed to Libraries/Core/Devtools/setupDevtools.js#L20-L23
  • >= 0.43 - Change host of Libraries/Core/Devtools/setupDevtools.js#L28-L30
• [Android] If you're debugging via USB, you can just run adb reverse tcp:8097 tcp:8097 on your terminal.

We used RemoteDev App and made the API same with Redux DevTools Extension!

If you're enabled Debug JS remotely with React Native Debugger, the following API is already included in global:

• window.__REDUX_DEVTOOLS_EXTENSION__
• window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__

See usage of redux-devtools-extension for more information.

• Redux counter
• MobX counter - with mobx-remotedev.

You need to switch worker thread for console, open Console tab on Chrome DevTools, tap top context and change to RNDebuggerWorker.js context:

We can do:

// const bakXHR = global.XMLHttpRequest;
// const bakFormData = global.FormData;
global.XMLHttpRequest = global.originalXMLHttpRequest ?
  global.originalXMLHttpRequest :
  global.XMLHttpRequest;
global.FormData = global.originalFormData ?
  global.originalFormData :
  global.FormData;

WARNING It will break NSExceptionDomains for iOS, because originalXMLHttpRequest is from debugger worker (it will replace native request), so we should be clear about the difference in debug mode.

If you want to inspect deeper network requests (Like request of Image), use tool like Stetho will be better.

Maybe the problem is related to requestIdleCallback API (try to check if it not work on debug mode), make sure the device time is the same as the host (your computer), otherwise:

// Not recommended
if (__DEV__) {
  window.requestIdleCallback = null
  window.cancelIdleCallback = null
}
// Make sure it before call at `import { ... } from 'react-native'`

Or use polyfill instead. (Like: react-devtools/agent/Bridge.js#L21-L22)

# Just clone it
$ git clone https://github.com/jhen0409/react-native-debugger
$ cd react-native-debugger && npm install

# Run on development
$ npm run dev:webpack  # Then open the another
$ npm run dev:electron

# Run on production
$ npm run build
$ npm start

# Run test
$ npm run lint
$ npm test

# Pack
$ npm run pack-macos
$ npm run pack-linux
$ npm run pack-windows
$ npm run pack # all

If you want to build binaries yourself, please remove electron/update.js (and electon/main.js usage), osx-sign in scripts/package-macos.sh.

• Great work of React DevTools
• Great work of Redux DevTools / Remote Redux DevTools and all third-party monitors.

MIT