Just these steps will let you start RNDebugger out of box:
- Make sure all debugger clients of React Native are closed, usually are
- Make sure RNDebugger is open and wait state.
- RNDebugger will try connect to debugger proxy, use port
8081by default, you can new debugger window (macOS:
Ctrl+T) to specify the port if you want.
Debug JS Remotelyof developer menu on your app
Launch by CLI or React Native packager (
rndebugger: URI scheme
Launch RNDebugger by typing the following command:
$ open "rndebugger://set-debugger-loc?host=localhost&port=8081"
port means React Native packager. You may need to set
port if you customize the packager port. (
8081 by default)
REACT_DEBUGGER env on react-native packager, it will try to launch RNDebugger when you turn on
Debug JS Remotely. For example, Artsy's Emission using the env for launch RNDebugger:
$ REACT_DEBUGGER="open -g 'rndebugger://set-debugger-loc?port=8001' ||" react-native start
Special case of Expo (CRNA):
$ REACT_DEBUGGER="unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19001' ||" npm start
NOTE Currently the
REACT_DEBUGGER env doesn't work with Haul bundler, please track issue #141 for more information.
If you don‘t need to add a dependency, you can use the package, it can help with:
open debugger-ui with Chrometo
open React Native Debuggerin 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
--portor use Expo, this will be very useful
What about Linux / Windows support?
rndebugger: URI scheme doesn't support for Linux / Windows.
react-native-debugger-open, it can be sent the
port setting if RNDebugger opened, but can't automatically open if closed.
If you want to have the feature (
rndebugger: or another way), you are welcome to contribute. Please read contributing to become a maintainer.
Use Redux DevTools Extension API
Using the same API as
redux-devtools-extension is very simple:
const store = createStore( reducer /* preloadedState, */, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() );
Redux DevTools Integration section for more information.
- React Native >= 0.43
- React Native for macOS (formerly react-native-desktop) >= 0.14.0
- React Native for Windows
Examples for use RNDebugger
The examples were bootstrapped with
Auto-update RNDebugger app (Supported v0.5.0 after)
Currently auto-update is only supported for macOS. Linux and Windows will show a dialog of new versions available for download.
You can also click
React Native Debugger (
RND for Linux / Windows) ->
Check for Updates... in the application menu.