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

Expand your agent's capabilities with these related and highly-rated skills.

aiskillstore/marketplace

perigon-backend

Perigon ASP.NET Core + EF Core + Aspire conventions

232 15
Explore
aiskillstore/marketplace

perigon-agent

Pointers for Copilot/agents to apply Perigon conventions

232 15
Explore
aiskillstore/marketplace

perigon-angular

Angular 21+ standalone/Material/signal conventions for Perigon WebApp

232 15
Explore
aiskillstore/marketplace

fastapi-mastery

Comprehensive FastAPI development skill covering REST API creation, routing, request/response handling, validation, authentication, database integration, middleware, and deployment. Use when working with FastAPI projects, building APIs, implementing CRUD operations, setting up authentication/authorization, integrating databases (SQL/NoSQL), adding middleware, handling WebSockets, or deploying FastAPI applications. Triggered by requests involving .py files with FastAPI code, API endpoint creation, Pydantic models, or FastAPI-specific features.

232 15
Explore
aiskillstore/marketplace

context7-efficient

Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.

232 15
Explore
aiskillstore/marketplace

browser-use

Browser automation using Playwright MCP. Navigate websites, fill forms, click elements, take screenshots, and extract data. Use when tasks require web browsing, form submission, web scraping, UI testing, or any browser interaction.

232 15
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results