Two Beautiful Dev Tools That Will Change How You Debug React Native

Welcome to Day 11 of the React Native Advent Calendar!

Today we’re showcasing two stunning dev tools that elevate React Native debugging from functional to beautiful. Say goodbye to clunky interfaces and hello to elegant, powerful debugging!

The Problem with Standard Dev Tools

The built-in React Native dev tools work, but let’s be honest - they’re not exactly inspiring to use. Debugging should be powerful AND pleasant. These two tools deliver both.

Tool 1: RN Better Dev Tools - A Beautiful macOS App

RN Better Dev Tools is a native macOS desktop application that brings React Query debugging to a whole new level. It’s designed for React-based platforms with a gorgeous native interface.

Key Features

Real-Time React Query Monitoring

• Monitor queries across multiple devices simultaneously
• Beautiful visualization of query states, data, and cache
• Live updates as your app interacts with data

Storage Management

• CRUD operations for MMKV, AsyncStorage, and SecureStorage
• Browse and edit storage directly from the app
• See your data in a clean, organized interface

Environment Variables

• Track public environment variables across your app
• Optional private variable monitoring
• Perfect for debugging configuration issues

Production Safety

• Automatically disabled in production builds
• Socket.IO-based communication
• Works with React Native, Web, Next.js, Expo, tvOS, and VR

Installation

Step 1: Download the macOS App

# Download from GitHub releases
# https://github.com/LovesWorking/rn-better-dev-tools/releases

# Extract and move to Applications folder
# Launch the app - it runs on port 42831

Note: Currently tested on Apple Silicon Macs (M1/M2/M3).

Step 2: Install Dependencies

npm install --save-dev react-query-external-sync socket.io-client
npm install expo-device

Step 3: Add to Your App

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useSyncQueriesExternal } from 'react-query-external-sync';
import Constants from 'expo-constants';
import * as Device from 'expo-device';

const queryClient = new QueryClient();

export default function RootLayout() {
	// Connect to Better Dev Tools
	useSyncQueriesExternal({
		queryClient,
		socketOptions: {
			socketUrl: 'http://localhost:42831', // Default port
			device: {
				deviceName: Device.deviceName || 'Unknown Device',
				appVersion: Constants.expoConfig?.version || '1.0.0'
			}
		},
		// Optional: Add storage instances
		storageInstances: [
			{ storage: myMMKVInstance, storageName: 'MMKV' },
			{ storage: AsyncStorage, storageName: 'AsyncStorage' }
		]
	});

	return <QueryClientProvider client={queryClient}>{/* Your app */}</QueryClientProvider>;
}

That’s it! Open the macOS app, run your React Native app, and watch the magic happen.

Tool 2: React Native Buoy - Zero-Config In-App Dev Tools

React Native Buoy is a floating dev panel that lives inside your React Native app. It’s like Chrome DevTools, but native to your app and beautiful.

Key Features

Zero Configuration

• Install packages, they auto-appear in the menu
• No manual registration or setup required
• Works out of the box

Persistent & Team-Friendly

• Tools retain position and state through reloads
• Consistent across dev, staging, AND production (optional)
• Easy onboarding for new team members

Beautiful UI

• Draggable floating menu
• Modal and bottom-sheet viewing modes
• Smooth animations and interactions

Fully Extensible

• Add custom React components as tools
• Integrate your own debugging utilities
• Environment and user role always visible

Available Tools

Buoy comes with a suite of powerful tools:

• ENV (@react-buoy/env): Inspect environment variables
• Network (@react-buoy/network): Monitor API requests/responses
• Storage (@react-buoy/storage): Browse AsyncStorage/MMKV
• React Query (@react-buoy/react-query): TanStack Query devtools
• Routes (@react-buoy/route-events): Track navigation events
• Borders (@react-buoy/debug-borders): Visual layout debugging

Custom Tools

You can also add your own tools easily:

import { DevToolRegistry } from '@react-buoy/core';

DevToolRegistry.register({
	id: 'my-custom-tool',
	name: 'Custom Tool',
	icon: '🛠️',
	component: MyCustomDebugComponent
});

Comparison: Which One Should You Use?

Use RN Better Dev Tools if you:

• Focus heavily on React Query
• Want a native macOS experience
• Need to monitor multiple devices simultaneously
• Prefer desktop-based debugging

Use React Native Buoy if you:

• Want in-app debugging without switching apps
• Need a variety of debugging tools (network, storage, etc.)
• Want zero-config setup
• Debug on-device (even in production builds)

Pro tip: Use both! RN Better Dev Tools for React Query on desktop, React Native Buoy for quick in-app debugging. They complement each other perfectly.

Wrapping Up

React Native debugging doesn’t have to be painful. These tools prove that developer experience matters.

Quick recap:

1. RN Better Dev Tools - Beautiful macOS app for React Query + Storage
2. React Native Buoy - Zero-config floating dev panel
3. Both are open-source and free
4. Install, enjoy, and debug faster

Want to try them?

• RN Better Dev Tools: GitHub | Releases
• React Native Buoy: GitHub
• Example App: RN Dev Tools Example

Built something cool with these tools? Share your setup on Twitter!

Tomorrow we’ll explore Day 12’s topic - see you then! 🎄