Agent skill

mobile-debugging

Debug React Native apps including metro bundler issues, native errors, performance problems, and crash analysis. Use when troubleshooting errors or investigating issues.

Stars 232
Forks 15

Install this agent skill to your Project

npx add-skill https://github.com/aiskillstore/marketplace/tree/main/skills/babakbar/mobile-debugging

SKILL.md

Mobile Debugging

Debugging guide for React Native and Expo applications.

When to Use

  • App crashes or freezes
  • Metro bundler errors
  • Native module issues
  • Performance problems
  • Build failures
  • Network request debugging

Common Issues & Fixes

Metro Bundler Problems

bash
# Clear all caches
npx expo start --clear
watchman watch-del-all
rm -rf node_modules && npm install

# Reset packager cache
rm -rf /tmp/metro-*
rm -rf /tmp/haste-*

Native Module Errors

bash
# iOS: Reset pods
cd ios && pod deintegrate && pod install && cd ..

# Android: Clean build
cd android && ./gradlew clean && cd ..

# Expo: Prebuild clean
npx expo prebuild --clean

Simulator/Emulator Issues

bash
# iOS: Reset simulator
xcrun simctl erase all

# Android: Wipe emulator data
adb devices  # Find device ID
adb -s DEVICE_ID emu kill

Debugging Tools

React DevTools

bash
# Install
npm install -g react-devtools

# Start
react-devtools

# In app: Shake device -> "Debug Remote JS"

Metro Logs

bash
# View detailed logs
npx expo start --verbose

# iOS device logs
npx react-native log-ios

# Android device logs
npx react-native log-android
adb logcat

Network Debugging

typescript
// Enable network inspector
import { Platform } from 'react-native';

if (__DEV__ && Platform.OS === 'ios') {
  require('react-native').NativeModules.DevSettings.setIsDebuggingRemotely(true);
}

// Or use Flipper for advanced network inspection

Performance Debugging

Identify Slow Renders

typescript
// Add performance logging
import { useEffect, useRef } from 'react';

function useRenderTime(componentName: string) {
  const start = useRef(performance.now());

  useEffect(() => {
    const duration = performance.now() - start.current;
    if (duration > 16) {
      console.warn(`Slow render: ${componentName} took ${duration.toFixed(2)}ms`);
    }
  });
}

// Use in components
function MyComponent() {
  useRenderTime('MyComponent');
  return <View>...</View>;
}

Memory Leaks

typescript
// Check for missing cleanup
useEffect(() => {
  const subscription = someObservable.subscribe();
  const timer = setInterval(() => {}, 1000);

  // MUST clean up!
  return () => {
    subscription.unsubscribe();
    clearInterval(timer);
  };
}, []);

Error Investigation

JavaScript Errors

bash
# Look for error in stack trace
# Check recent file changes
# Verify imports and dependencies
# Check for typos in variable names

Native Errors

bash
# iOS: Check Xcode console
# Android: Check Android Studio Logcat
# Look for Java/Swift exceptions
# Check native module compatibility

Build Errors

bash
# Check package versions
npx expo-doctor

# Verify node/npm versions
node --version
npm --version

# Check for conflicting dependencies
npm ls PACKAGE_NAME

Debugging Commands

bash
# Check what's using a port
lsof -ti:8081  # Metro bundler port
lsof -ti:19000 # Expo DevTools

# Kill process on port
kill -9 $(lsof -ti:8081)

# Check device connectivity
# iOS
xcrun simctl list devices

# Android
adb devices

# Restart adb
adb kill-server
adb start-server

Debugging Checklist

When investigating issues:

  1. Reproduce: Can you consistently trigger the issue?
  2. Recent Changes: What was changed before it broke?
  3. Error Message: Read the full error, including stack trace
  4. Dependencies: Check if packages are compatible
  5. Platform: Does it happen on iOS, Android, or both?
  6. Environment: Dev only or production builds too?
  7. Logs: Check Metro, Xcode, and Logcat for details

Common Error Patterns

  • "Unable to resolve module": Check import path and file exists
  • "Invariant Violation": React error, check component lifecycle
  • "Network request failed": Check API URL and network connection
  • "Undefined is not an object": Check for null/undefined before accessing properties
  • "Maximum call stack size exceeded": Infinite loop or recursion

Resources

Didn't find tool you were looking for?

Be as detailed as possible for better results