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
toopen 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
- Changelocalhost
ofLibraries/Devtools/setupDevtools.js#L17
>= 0.31
- Addhostname = 'your IP'
to next line ofLibraries/Devtools/setupDevtools.js#L20-L23
>= 0.37
- The same as above, but the path is changed toLibraries/Core/Devtools/setupDevtools.js#L20-L23
>= 0.43
- Changehost
ofLibraries/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.
Redux DevTools (and RemoteDev on local even MobX)
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
- withmobx-remotedev
.
You need to switch worker thread for console, open Console
tab on Chrome DevTools, tap top
context and change to RNDebuggerWorker.js
context:
Inpsect network requests by Network
tab of Chrome DevTools (See also #15)
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.
[Android] React Inspector get stuck at "Connecting to React…" (#45)
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.