Notes

Opening React Native Debugger automatically on the correct port

How to open React Native Debugger on the right port depending on the project

Edit on GitHub

React Native & Expo
2 minutes

the issues:

  1. I work on both Expo and React Native projects. The ports for both are different, one works on port 19001 and the other on 8080. 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.
  2. 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

1REACT_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

1# React Native projects (with RN Debugger on custom port)
2REACT_DEBUGGER="open -g 'rndebugger://set-debugger-loc?port=8001' ||" react-native start
3
4# Expo projects (with RN Debugger on custom port)
5REACT_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.

1npm i --save-dev react-native-debugger-open

1# Linux
2REACT_DEBUGGER="rndebugger-open --open --port 8081" npm start
3
4# Windows
5set REACT_DEBUGGER="rndebugger-open --open --port 8081" && npm start

For Expo projects, you can pass --expo instead of --port 1234

1# Linux
2REACT_DEBUGGER="rndebugger-open --open --expo" npm start
3
4# Windows
5set 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.

1# Start the project
2REACT_DEBUGGER="rndebugger-open --open --expo" npm start
3
4# Use another Terminal to open React Native Debugger
5xterm -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

Browse all topics