Debugging Expo React Native

Blogged By

Chitranjan Gupta@chitranjan-gupta

26 January 202502:48:00 pm

Introduction:

Debugging is an essential part of the development process, especially when working with complex frameworks like React Native. Fortunately, the React Native team has created a powerful debugging tool called React Native DevTools, designed to make debugging a more seamless and efficient experience.

What is React Native DevTools?

React Native DevTools is a modern debugging experience for React Native, built from the ground up to be fundamentally integrated, correct, and reliable. It's specifically designed for debugging React app concerns and not to replace native tools. If you're working with native modules, you should continue using the debugging tools available in Android Studio and Xcode.

Key Features:

React Native DevTools is based on the Chrome DevTools frontend, offering a familiar interface to web developers. Let's explore some of its core features:

Console: The Console panel allows you to view and filter messages, evaluate JavaScript, inspect object properties, and more.
Sources & breakpoints: The Sources panel enables you to view the source files in your app and register breakpoints. Breakpoints allow you to inspect the live state of the program and incrementally step through code.
Memory: The Memory panel allows you to take a heap snapshot and view the memory usage of your JavaScript code over time.
React DevTools: The Components and Profiler panels from the React DevTools browser extension are integrated into React Native DevTools, enabling you to inspect and update the rendered React component tree, highlight re-renders, and record performance profiles.

How to open React Native Devtools Locally ?

Here are the steps to open React Native DevTools:

Start your project with the command npx expo start in your terminal.
Press the j key in the terminal to open the debugger in Google Chrome or Microsoft Edge.
Alternatively, If using development builds or Expo Go, Shake the device and press the "Open JS Debugger" option in the developer menu.
Make sure your app is connected to the development server and try reloading the app if you encounter issues.

How to open React Native Devtools through tunneling ?

Method 1

To start React Native DevTools through tunneling, follow these steps:

Download the chrome extension zip from https://github.com/chitranjan-gupta/expo-react-native-devtools
Extract it and Open Chrome Based Browser and navigate to chrome://extensions
Enable Developer Mode and then click on Load Unpacked and choose the location where you have extracted the extension
After Installing the extension. Go to your expo project and start your project with the command npx expo start --tunnel --go.
You should start with --go mode because websocket tunneling does not work through https therefore --go start on http
Suppose your tunnel url http://jk9w8fg-anonymous-8081.exp.direct.
Click on the Icon of Expo React Native Devtools Extension and paste http://jk9w8fg-anonymous-8081.exp.direct and Click on Open Expo React Native Devtool
It will open a window or tab with React Native Devtool

Method 2

To start React Native DevTools through tunneling, follow these steps:

Start your project with the command npx expo start --tunnel --go.
You should start with --go mode because websocket tunneling does not work through https therefore --go start on http
Suppose your tunnel url http://jk9w8fg-anonymous-8081.exp.direct.
Add this url exception list in chrome unsecure content otherwise chrome will redirect it to https.
then navigate to http://jk9w8fg-anonymous-8081.exp.direct/json/list, it should give json response of connected devices. If it is empty array connect it to device and then refresh it.
It should look like this, select first devtoolsFrontendUrl.

[
  {
    "id": "cb824cb576c4cdca4be753731dde1ec809e5794a-1",
    "title": "React Native Bridgeless [C++ connection]",
    "description": "com.chitranjangupta.shikshasetu.development",
    "type": "node",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=10.0.5.2%3A8081%2Finspector%2Fdebug%3Fdevice%3Dcb824cb576c4cdca4be753731dde1ec809e5794a%26page%3D1",
    "webSocketDebuggerUrl": "ws://10.0.5.2:8081/inspector/debug?device=cb824cb576c4cdca4be753731dde1ec809e5794a&page=1",
    "deviceName": "21091116UI - 13 - API 33",
    "reactNative": {
      "logicalDeviceId": "cb824cb576c4cdca4be753731dde1ec809e5794a",
      "capabilities": {
        "prefersFuseboxFrontend": true,
        "nativeSourceCodeFetching": false,
        "nativePageReloads": true
      }
    }
  },
  {
    "id": "cb824cb576c4cdca4be753731dde1ec809e5794a-2",
    "title": "React Native Bridgeless [C++ connection]",
    "description": "com.chitranjangupta.shikshasetu.development",
    "type": "node",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=10.0.5.2%3A8081%2Finspector%2Fdebug%3Fdevice%3Dcb824cb576c4cdca4be753731dde1ec809e5794a%26page%3D2",
    "webSocketDebuggerUrl": "ws://10.0.5.2:8081/inspector/debug?device=cb824cb576c4cdca4be753731dde1ec809e5794a&page=2",
    "deviceName": "21091116UI - 13 - API 33",
    "reactNative": {
      "logicalDeviceId": "cb824cb576c4cdca4be753731dde1ec809e5794a",
      "capabilities": {
        "prefersFuseboxFrontend": true,
        "nativeSourceCodeFetching": false,
        "nativePageReloads": true
      }
    }
  },
  {
    "id": "cb824cb576c4cdca4be753731dde1ec809e5794a-3",
    "title": "Reanimated UI runtime [C++ connection]",
    "description": "com.chitranjangupta.shikshasetu.development",
    "type": "node",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=10.0.5.2%3A8081%2Finspector%2Fdebug%3Fdevice%3Dcb824cb576c4cdca4be753731dde1ec809e5794a%26page%3D3",
    "webSocketDebuggerUrl": "ws://10.0.5.2:8081/inspector/debug?device=cb824cb576c4cdca4be753731dde1ec809e5794a&page=3",
    "deviceName": "21091116UI - 13 - API 33",
    "reactNative": {
      "logicalDeviceId": "cb824cb576c4cdca4be753731dde1ec809e5794a",
      "capabilities": {
        "prefersFuseboxFrontend": false,
        "nativeSourceCodeFetching": false,
        "nativePageReloads": false
      }
    }
  },
  {
    "id": "cb824cb576c4cdca4be753731dde1ec809e5794a-4",
    "title": "video-metadata-runtime [C++ connection]",
    "description": "com.chitranjangupta.shikshasetu.development",
    "type": "node",
    "devtoolsFrontendUrl": "devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=10.0.5.2%3A8081%2Finspector%2Fdebug%3Fdevice%3Dcb824cb576c4cdca4be753731dde1ec809e5794a%26page%3D4",
    "webSocketDebuggerUrl": "ws://10.0.5.2:8081/inspector/debug?device=cb824cb576c4cdca4be753731dde1ec809e5794a&page=4",
    "deviceName": "21091116UI - 13 - API 33",
    "reactNative": {
      "logicalDeviceId": "cb824cb576c4cdca4be753731dde1ec809e5794a",
      "capabilities": {
        "prefersFuseboxFrontend": false,
        "nativeSourceCodeFetching": false,
        "nativePageReloads": false
      }
    }
  }
]

Replace devtools://devtools/bundled/js_app.html with http://jk9w8fg-anonymous-8081.exp.direct/debugger-frontend/rn_fusebox.html and ws=10.0.5.2%3A8081 with ws=jk9w8fg-anonymous-8081.exp.direct
After replacing it will look like this http://jk9w8fg-anonymous-8081.exp.direct/debugger-frontend/rn_fusebox.html?experiments=true&v8only=true&ws=jk9w8fg-anonymous-8081.exp.direct%2Finspector%2Fdebug%3Fdevice%3Dcb824cb576c4cdca4be753731dde1ec809e5794a%26page%3D1
Navigate to this url it will open React Native Devtool
Make sure your app is connected to the development server and try reloading the app if you encounter issues.

Note that tunneling allows you to debug your app remotely, but it may result in slower performance and increased latency. It is recommended to use local debugging when possible.

Conclusion:

React Native DevTools is a powerful debugging tool for React Native developers. Its familiar interface and rich features make debugging a more enjoyable and productive experience. By incorporating the best of Chrome DevTools and React DevTools, it offers a comprehensive debugging solution for React Native apps.

Debugging Expo React Native