Skip to content

Latest commit

 

History

History
92 lines (59 loc) · 4.48 KB

getting-started.md

File metadata and controls

92 lines (59 loc) · 4.48 KB
Raw

Getting Started

Just these steps let you start RNDebugger out of box:

  • Make sure all debugger clients of React Native are closed, usually are http://localhost:<port>/debugger-ui
  • Make sure RNDebugger is open and wait state.
  • RNDebugger will try connect to debugger proxy, use port 8081 by default, you can new debugger window (macOS: Command+T, Linux/Windows: Ctrl+T) to specify the port if you want.
  • Enable Debug JS Remotely of developer menu on your app

Launch by CLI or React Native packager (macOS only)

The rndebugger: URI scheme

Launch RNDebugger by the following command:

$ open "rndebugger://set-debugger-loc?host=localhost&port=8081"

The host, port is mean React Native packager, you may need to set port if you custom the packager port. (8081 by default)

From Debugging using a custom JavaScript debugger of React Native docs, you can use 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 tracking issue #141.

Use react-native-debugger-open

If you don‘t care to add a dependency, you can use the package, it can help to:

  • Replace open debugger-ui with Chrome to open React Native Debugger in 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 or use Expo, this will very useful

What about Linux / Windows support?

Currently the rndebugger: URI scheme doesn't support for Linux / Windows.

In react-native-debugger-open, it can be send host, port setting if RNDebugger opened, but can't automatically open if closed.

If you want to have the feature (rndebugger: or another way), welcome to contributing and become the maintainer.

Use Redux DevTools Extension API

Use the same API as redux-devtools-extension is very simple:

const store = createStore(
  reducer, /* preloadedState, */
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

See Redux DevTools Integration section for more information.

Platform support

Examples for use RNDebugger

The examples was bootstrapped with create-react-native-app.

Auto-update RNDebugger app (Supported v0.5.0 after)

Currently auto-update is only supported for macOS, for Linux / Windows will show dialog of new version available for download.

You can also click React Native Debugger (RND for Linux / Windows) -> Check for Updates... in application menu.

Other documentations