Skip to content

Latest commit

 

History

History
90 lines (59 loc) · 4.16 KB

getting-started.md

File metadata and controls

90 lines (59 loc) · 4.16 KB

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

Platform: macOS / Linux

The rndebugger: URI scheme

Launch RNDebugger by typing the following command:

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

Or xdg-open for Linux:

$ xdg-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:

$ REACT_DEBUGGER="unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19000' ||" npm start

You can use open on macOS or xdg-open on Linux, currently it is not supported for Windows.

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 Windows support?

Currently the rndebugger: URI scheme doesn't support for 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

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