Debugging React Native Apps

​

Developer Menu

• iOS Simulator: Cmd + D
• Android Emulator: Cmd/Ctrl + M
• Physical Device: Shake gesture

​

Available Options

• Reload: Reload the JavaScript bundle
• Debug with Chrome: Opens Chrome DevTools for debugging
• Toggle Inspector: Inspect element hierarchies and styles
• Show Performance Monitor: Display memory and performance metrics
• Fast Refresh: Enable/disable automatic refresh on file changes

​

LogBox

• Displaying errors with syntax highlighting and stack traces
• Collapsing framework-internal logs for clarity
• Providing actionable error messages
• Allowing log filtering and dismissal

​

Using LogBox

import {LogBox} from 'react-native';

// Ignore specific warnings
LogBox.ignoreLogs([
  'Warning: componentWillReceiveProps',
]);

// Ignore all logs (not recommended for production)
LogBox.ignoreAllLogs(true);

​

React DevTools

​

Installation

npm install -g react-devtools

​

Usage

react-devtools

​

Chrome DevTools

• Console: View console.log output and errors
• Sources: Set breakpoints and step through code
• Network: Inspect network requests (limited in React Native)
• Performance: Profile JavaScript execution

​

Debugging JavaScript

// Set a breakpoint in your code
debugger;

// Or use console methods
console.log('Value:', value);
console.warn('Warning message');
console.error('Error:', error);

​

Native Debugging

​

iOS

1. Open ios/YourApp.xcworkspace in Xcode
2. Set breakpoints in Objective-C or Swift files
3. Run the app from Xcode (Cmd + R)
4. Use the debugger when breakpoints are hit

​

Android

1. Open the android folder in Android Studio
2. Set breakpoints in Java or Kotlin files
3. Run the app in debug mode
4. Attach the debugger to the process

​

Performance Monitoring

​

DevSettings Module

import DevSettings from 'react-native/Libraries/Utilities/DevSettings';

// Add custom dev menu items
DevSettings.addMenuItem('Show Secret Menu', () => {
  // Custom action
});

// Reload the app
DevSettings.reload();

​

Network Debugging

​

Using Flipper

1. Install Flipper desktop app
2. Enable the Network plugin
3. View all network requests with headers, bodies, and timing

​

Manual Network Logging

const originalFetch = fetch;
global.fetch = async (...args) => {
  console.log('Fetch:', args[0]);
  const response = await originalFetch(...args);
  console.log('Response:', response.status);
  return response;
};

​

Source Maps

• See original file names and line numbers in stack traces
• Set breakpoints in your original source code
• Step through code that matches your source files

​

Symbolicating Stack Traces

npx metro-symbolicate android/app/build/generated/sourcemaps/react/release/index.android.bundle.map < stacktrace.txt

​

Common Debugging Scenarios

​

Red Screen Errors

1. Read the error message carefully
2. Check the stack trace for the error source
3. Look for file names and line numbers
4. Click on stack frames to open in editor

​

Yellow Box Warnings

• Updating deprecated APIs
• Fixing incorrect prop types
• Resolving performance issues

​

Remote Debugging Caveats

• Performance is slower when remote debugging
• Some native modules may behave differently
• Async operations may have different timing

​

Best Practices

1. Use TypeScript: Catch errors at compile time
2. Enable Fast Refresh: See changes instantly
3. Use console methods wisely: Leverage console.group, console.table
4. Set up error boundaries: Catch React errors gracefully
5. Test on real devices: Simulators don’t catch all issues
6. Use Flipper: Comprehensive debugging for both platforms
7. Keep DevTools open: Monitor logs and network in real-time

​

Next Steps