A Comprehensive Guide to React Native Debugger: Installation, Usage, and Configuration

Introduction – Debugging React Native (RN) code can be challenging; RN Debugger is an independent Electron‑based application that combines the official local debugger with React DevTools and Redux DevTools, offering a richer debugging experience.

Installation – On macOS you can install RN Debugger via Homebrew:

$ brew update && brew cask install react-native-debugger

After installation the app appears in the Launchpad and can be started directly.

Basic Usage – Ensure other RN debugging tools (e.g., http://localhost:8081/debugger-ui ) are closed. RN Debugger listens on port 8081 by default, matching the RN packager. You can open a new window (⌘+T) and specify a different port to debug apps that run on non‑default ports.

React Tools – The React DevTools panel shows the component hierarchy, props, state, context, and style information. Clicking a component in the hierarchy highlights it in the RN app, and you can edit styles directly in the panel, which updates the UI instantly.

Redux Tools – RN Debugger exposes the Redux DevTools Extension APIs globally:

window.REDUXDEVTOOLSEXTENSION
window.REDUXDEVTOOLSEXTENSIONCOMPOSE
window.REDUXDEVTOOLS_EXTENSION.connect

To see Redux state you must add the Redux DevTools extension as middleware when creating the store. Example setup:

import { compose, createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';
const middleware = [thunk];
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
export default createStore(reducers, composeEnhancers(applyMiddleware(...middleware)));

Context Menu – Right‑clicking in the RN Debugger UI opens a context menu that lets you refresh, inspect elements, or perform other actions without needing to long‑press in the RN app.

Network Monitoring – RN Debugger can capture fetch and XMLHttpRequest calls. Add the following code (e.g., in index.ios.js ) to expose the original implementations and allow the debugger to intercept requests:

global.XMLHttpRequest = global.originalXMLHttpRequest;
global.FormData = global.originalFormData;
global.Blob = global.originalBlob ? global.originalBlob : global.Blob;
global.FileReader = global.originalFileReader;

While the debugger can monitor most network traffic, it cannot capture image loading; for deeper inspection tools like Charles are recommended.

Opening Source Files from Console – Enable the menu option to click source links in the console panel, which opens the corresponding file in the default editor (e.g., VSCode, Sublime, Atom).

Configuration Options – RN Debugger reads a JSON configuration file. Example settings include font family, window size, auto‑update flag, default RN packager ports, editor path, theme, and whether network inspection is enabled:

{
  "fontFamily": "monaco, Consolas, Lucida Console, monospace",
  "windowBounds": { "width": 1024, "height": 750 },
  "autoUpdate": true,
  "defaultRNPackagerPorts": [8081],
  "editor": "",
  "defaultReactDevToolsTheme": "RNDebugger",
  "defaultNetworkInspect": false
}

Memory Usage Tip – Prolonged use may increase memory consumption because RN Debugger embeds the official local debugger. Quickly reload Chrome DevTools (⌘+⌥+I on macOS, Ctrl+Alt+I on Windows/Linux) to free memory.

Conclusion – RN Debugger provides valuable features such as jumping from UI elements to source code, live style editing, Redux state inspection, multi‑port debugging, and network request monitoring. Although it has some limitations, it is a powerful tool that RN developers should try.