Opening React Native Debugger automatically on the correct port
How to open React Native Debugger on the right port depending on the project
the issues:
- I work on both Expo and React Native projects. The ports for both are different, one works on port
19001
and the other on8080
. React Native debugger always opens on the one default port in it's config, and i have to manually open a new window with the correct port every time i switch from working on Expo or React Native. - React Native opens a Chrome tab every time i start debugging, which i have to close in order to work with React Native Debugger
the solutions:
Using a custom debugger for React Native
This one was an easy fix. React Native allows you to use a custom debugger instead of the default Chrome tab. You do that by setting a REACT_DEBUGGER
environment variable. The value for REACT_DEBUGGER
is whatever command you want to run. For example
REACT_DEBUGGER="node /path/to/launchDebugger.js --port 2345 --type ReactNative"
Opening React Native Debugger on the right port depending on the project
And React Native Debugger allows automatically opening it on a custom port
on macOS very easily, you pass the following for REACT_DEBUGGER
# React Native projects (with RN Debugger on custom port)
REACT_DEBUGGER="open -g 'rndebugger://set-debugger-loc?port=8001' ||" react-native start
# Expo projects (with RN Debugger on custom port)
REACT_DEBUGGER="unset ELECTRON_RUN_AS_NODE && open -g 'rndebugger://set-debugger-loc?port=19001' ||" npm start
But for Linux and Windows you'd use react-native-debugger-open for specifying the port to open with and the value for REACT_DEBUGGER
. You also need to manually open the debugger afterwards.
npm i --save-dev react-native-debugger-open
# Linux
REACT_DEBUGGER="rndebugger-open --open --port 8081" npm start
# Windows
set REACT_DEBUGGER="rndebugger-open --open --port 8081" && npm start
For Expo projects, you can pass --expo
instead of --port 1234
# Linux
REACT_DEBUGGER="rndebugger-open --open --expo" npm start
# Windows
set REACT_DEBUGGER="rndebugger-open --open --expo" && npm start
After that, open React Native Debugger and it should automatically connect to the right port.
Although on Linux React Native Debugger wouldn't open itself automatically, i have scripted that part. As part of the script that i use to open everything for the project, i have added a command to open the debugger too.
# Start the project
REACT_DEBUGGER="rndebugger-open --open --expo" npm start
# Use another Terminal to open React Native Debugger
xterm -e react-native-debugger & disown
Because i don't get the prompt back after running the start
script, i'm basically opening another terminal window to open React Native Debugger