Remote debugger for React Native - intercept console logs and network requests
npm install rn-remote-debuggerRemote debugger for React Native - intercept console logs and network requests via WebSocket.
``bash`
npm install rn-remote-debuggeror
yarn add rn-remote-debugger
Generate a configuration file in your project root:
`bash`
npx rn-remote-debugger-create
This creates a rn-remote-debug.js file with your computer's IP address:
`javascript`
if (__DEV__) {
module.exports = {
host: '192.168.1.100', // Auto-detected IP
port: 8989,
enableConsole: true,
enableNetwork: true
};
} else {
module.exports = {};
}
In your React Native app's entry file (e.g., index.js):
`javascript
import initRemoteDebugger from "rn-remote-debugger";
initRemoteDebugger();
`
The debugger will automatically read the configuration file and connect.
For Android devices/emulators, run this command in terminal before starting your app:
`bash`
adb reverse tcp:8989 tcp:8989
Download and open the RN Remote Debugger desktop app to view logs and network requests.
Create rn-remote-debug.js in your project root:
`javascript`
if (__DEV__) {
module.exports = {
host: '192.168.1.100',
port: 8989,
enableConsole: true,
enableNetwork: true
};
} else {
module.exports = {};
}
Priority: Configuration file > Code parameters
`javascript
import initRemoteDebugger from "rn-remote-debugger";
initRemoteDebugger({
port: 8989,
enableConsole: true,
enableNetwork: true
});
`
Note: If a configuration file exists, it will override code parameters.
View all available IP addresses on your machine:
`bash`
npx rn-remote-debugger-ip
Output:
`
š” Your local IP addresses:
en0 ā 192.168.1.100
en1 ā 10.0.0.5
š” Usage in rn-remote-debug.js:
module.exports = {
host: '192.168.1.100',
port: 8989
};
`
Generate rn-remote-debug.js in your project root:
`bash`
npx rn-remote-debugger-create
This will:
- Auto-detect your local IP address
- Create the configuration file
- Show setup instructions
- š Intercept all console logs (log, warn, error, info, debug)
- š Intercept network requests (fetch & XMLHttpRequest)
- š Search and filter requests
- š View request/response details
- šØ Beautiful UI with Ant Design
- ā”ļø Real-time WebSocket connection
- š Auto-disabled in production (__DEV__ check)
- š± Auto-clear logs on app restart
- host (string): WebSocket server host. Default: auto-detect from config fileport
- (number): WebSocket server port. Default: 8989enableConsole
- (boolean): Enable console interception. Default: trueenableNetwork
- (boolean): Enable network interception. Default: true
Download the desktop debugger app to view logs and network requests:
- macOS: Download DMG
The desktop app will automatically connect to your React Native app via WebSocket.
1. The npm package intercepts console logs and network requests in your RN app
2. Data is sent via WebSocket to the desktop debugger app
3. View all logs and requests in real-time with a beautiful UI
4. When the app restarts, all logs are automatically cleared
The debugger automatically checks __DEV__ and only runs in development mode. In production builds, it returns immediately without any overhead.
Android emulators and devices need port forwarding to connect to your development machine. The adb reverse command forwards the device's port 8989 to your computer's port 8989.
`bashRun once before starting your app
adb reverse tcp:8989 tcp:8989
MIT