2017-05-02 11:55:14 +08:00
# Getting Started
2018-10-09 00:41:49 +02:00
Just these steps will let you start RNDebugger out of box:
2019-02-01 14:04:10 +08:00
2018-12-22 00:55:49 -08:00
- Install the latest version ([download page ](https://github.com/jhen0409/react-native-debugger/releases )).
2018-10-03 08:12:56 +08:00
- 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.
2019-07-20 04:23:40 +02:00
- 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.
2021-12-05 21:31:50 -05:00
- Enable `Debug JS Remotely` of [developer menu ](https://reactnative.dev/docs/debugging#accessing-the-in-app-developer-menu ) on your app
2017-05-02 11:55:14 +08:00
2023-07-23 15:26:53 +08:00
## Launch by CLI or React Native packager
Platform: macOS / Linux
2017-10-10 03:56:40 +08:00
### The `rndebugger:` URI scheme
2018-10-09 00:41:49 +02:00
Launch RNDebugger by typing the following command:
2017-10-10 03:56:40 +08:00
``` bash
$ open "rndebugger://set-debugger-loc?host=localhost&port=8081"
```
2023-07-23 15:26:53 +08:00
Or `xdg-open` for Linux:
``` bash
$ xdg-open "rndebugger://set-debugger-loc?host=localhost&port=8081"
```
2018-10-09 00:41:49 +02:00
The `host` / `port` means React Native packager. You may need to set `port` if you customize the packager port. (`8081` by default)
2017-10-10 03:56:40 +08:00
2023-07-20 14:59:10 +08:00
From [`Debugging using a custom JavaScript debugger` ](https://reactnative.dev/docs/0.71/debugging#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` :
2017-10-10 03:56:40 +08:00
``` bash
2023-07-20 14:59:10 +08:00
$ REACT_DEBUGGER = "unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19000' ||" npm start
2017-10-10 03:56:40 +08:00
```
2023-07-20 14:59:10 +08:00
You can use `open` on macOS or `xdg-open` on Linux, currently it is not supported for Windows.
2017-10-10 03:56:40 +08:00
### Use [`react-native-debugger-open`](../npm-package)
2017-09-13 03:31:53 +08:00
2018-10-09 00:41:49 +02:00
If you don‘
2017-09-13 03:31:53 +08:00
2018-10-03 08:12:56 +08:00
- 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
2017-09-13 03:31:53 +08:00
2023-07-20 14:59:10 +08:00
### What about Windows support?
2017-10-10 03:56:40 +08:00
2023-07-20 14:59:10 +08:00
Currently the `rndebugger:` URI scheme doesn't support for Windows.
2017-10-10 03:56:40 +08:00
2018-10-09 00:41:49 +02:00
In [`react-native-debugger-open` ](../npm-package ), it can be sent the `host` / `port` setting if RNDebugger opened, but can't automatically open if closed.
2017-10-10 03:56:40 +08:00
2018-10-09 00:41:49 +02:00
If you want to have the feature (`rndebugger:` or another way), you are welcome to contribute. Please read [contributing ](https://github.com/jhen0409/react-native-debugger/blob/master/docs/contributing.md ) to become a maintainer.
2017-10-10 03:56:40 +08:00
2017-08-18 16:53:06 +08:00
## Use Redux DevTools Extension API
2017-05-03 20:37:40 +08:00
2018-10-09 00:41:49 +02:00
Using the same API as [`redux-devtools-extension` ](https://github.com/zalmoxisus/redux-devtools-extension#1-with-redux ) is very simple:
2017-05-03 20:37:40 +08:00
``` js
const store = createStore (
2018-10-03 08:12:56 +08:00
reducer /* preloadedState, */ ,
2019-02-01 14:04:10 +08:00
window . _ _REDUX _DEVTOOLS _EXTENSION _ _ && window . _ _REDUX _DEVTOOLS _EXTENSION _ _ ( ) ,
)
2017-05-03 20:37:40 +08:00
```
See [`Redux DevTools Integration` ](redux-devtools-integration.md ) section for more information.
2017-05-02 11:55:14 +08:00
## Platform support
2018-10-03 08:12:56 +08:00
- [React Native ](https://github.com/facebook/react-native ) >= 0.43
- [React Native for macOS ](https://github.com/ptmt/react-native-macos ) (formerly react-native-desktop) >= 0.14.0
- [React Native for Windows ](https://github.com/Microsoft/react-native-windows )
2017-05-02 11:55:14 +08:00
2017-05-04 23:51:20 +08:00
## Auto-update RNDebugger app (Supported v0.5.0 after)
2018-10-09 00:41:49 +02:00
Currently auto-update is only supported for macOS. Linux and Windows will show a dialog of new versions available for download.
2017-05-04 23:51:20 +08:00
2018-10-09 00:41:49 +02:00
You can also click `React Native Debugger` (`RND` for Linux / Windows) -> `Check for Updates...` in the application menu.
2017-09-13 03:33:46 +08:00
## Other documentations
2018-10-03 08:12:56 +08:00
- [Debugger Integration ](debugger-integration.md )
- [React DevTools Integration ](react-devtools-integration.md )
- [Redux DevTools Integration ](redux-devtools-integration.md )
2019-02-01 14:04:10 +08:00
- [Apollo Client DevTools Integration ](apollo-client-devtools-integration.md )
2018-10-03 08:12:56 +08:00
- [Shortcut references ](shortcut-references.md )
- [Network inspect of Chrome Developer Tools ](network-inspect-of-chrome-devtools.md )
- [Enable open in editor in console ](enable-open-in-editor-in-console.md )
- [Config file in home directory ](config-file-in-home-directory.md )
- [Troubleshooting ](troubleshooting.md )
- [Contributing ](contributing.md )
