Skip to content

Latest commit

 

History

History
95 lines (62 loc) · 4.77 KB

getting-started.md

File metadata and controls

95 lines (62 loc) · 4.77 KB
Raw

Getting Started

Just these steps will let you start RNDebugger out of box:

  • Install the latest version (download page).
  • 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 create a 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 typing the following command:

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

The host / port means React Native packager. You may need to set port if you customize 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 track issue #141 for more information.

Use react-native-debugger-open

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

  • 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 be 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 sent the host / 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__(),
)

See Redux DevTools Integration section for more information.

Platform support

Examples for use RNDebugger

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

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.

Other documentations