jhen0409/react-native-debugger

★ 10,464JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((RN Debugger))
    What it does
      Debug mobile apps
      Inspect components
      Track state history
    Built-in tools
      Remote debugger
      React Inspector
      Redux DevTools
      Apollo DevTools
    Platforms
      macOS
      Linux
      Windows
    Limitations
      Legacy arch only
      No Hermes support

mindmap root((RN Debugger)) What it does Debug mobile apps Inspect components Track state history Built-in tools Remote debugger React Inspector Redux DevTools Apollo DevTools Platforms macOS Linux Windows Limitations Legacy arch only No Hermes support

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Inspect the component tree of a React Native app to understand how the UI is structured and debug rendering issues.

USE CASE 2

Time-travel through Redux state changes to reproduce and fix bugs caused by incorrect state updates.

USE CASE 3

Debug GraphQL data fetching in a React Native app that uses Apollo Client.

Tech stack

JavaScriptElectronReact NativeRedux DevToolsApollo Client DevTools

Getting it running

Difficulty · easy Time to first run · 5min

Only supports the older React Native remote debugger architecture, not compatible with Hermes engine or the New Architecture.

MIT license, use, modify, and distribute freely for any purpose, including commercial, as long as you keep the copyright notice.

In plain English

React Native Debugger is a standalone desktop application for debugging React Native mobile apps. React Native is a framework for building iOS and Android apps using JavaScript, and when something goes wrong in such an app, developers need specialized tools to inspect what is happening inside the running app. This tool collects several of those inspection tools into one window. The app bundles three things together. First, it includes the standard remote debugger that React Native has always offered, which connects to your running app over a local network. Second, it includes React Inspector, which shows the component tree of your user interface so you can see how the UI is structured and check the values being passed to each piece. Third, it includes Redux DevTools, which is useful if your app uses Redux, a popular pattern for managing application state. Redux DevTools lets you see the history of every state change in the app and replay or rewind through them. The app also integrates Apollo Client DevTools for apps that use Apollo, a client for fetching data from GraphQL APIs. The README contains an important warning: as of the time of writing, the app only supports the older remote debugger architecture. Newer React Native setups that use the Hermes JavaScript engine or the New Architecture are not fully supported, and there is an open discussion in the repository about what it would take to add that support. Installation is available as a downloadable binary for macOS, Linux, and Windows, or via Homebrew on macOS. For Arch Linux users there is an AUR package. The app is MIT-licensed and open source.

Copy-paste prompts

Prompt 1

My React Native app using Redux has a state bug I can't reproduce. Help me use React Native Debugger's Redux DevTools to trace the action that caused the wrong state.

Prompt 2

Walk me through connecting React Native Debugger to my running iOS simulator and using the React Inspector to find why a component isn't rendering.

Prompt 3

My React Native app uses Apollo Client for GraphQL. How do I enable and use the Apollo DevTools tab in React Native Debugger?

Prompt 4

React Native Debugger shows 'waiting for runtime to connect', walk me through the steps to troubleshoot this connection issue.

Open on GitHub → Explain another repo

← jhen0409 on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.