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.
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
# 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
# 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
# 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
# Install
npm install -g react-devtools
# Start
react-devtools
# In app: Shake device -> "Debug Remote JS"
Metro Logs
# 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
// 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
// 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
// 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
# Look for error in stack trace
# Check recent file changes
# Verify imports and dependencies
# Check for typos in variable names
Native Errors
# iOS: Check Xcode console
# Android: Check Android Studio Logcat
# Look for Java/Swift exceptions
# Check native module compatibility
Build Errors
# Check package versions
npx expo-doctor
# Verify node/npm versions
node --version
npm --version
# Check for conflicting dependencies
npm ls PACKAGE_NAME
Debugging Commands
# 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:
- Reproduce: Can you consistently trigger the issue?
- Recent Changes: What was changed before it broke?
- Error Message: Read the full error, including stack trace
- Dependencies: Check if packages are compatible
- Platform: Does it happen on iOS, Android, or both?
- Environment: Dev only or production builds too?
- 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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
perigon-backend
Perigon ASP.NET Core + EF Core + Aspire conventions
perigon-agent
Pointers for Copilot/agents to apply Perigon conventions
perigon-angular
Angular 21+ standalone/Material/signal conventions for Perigon WebApp
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.
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.
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.
Didn't find tool you were looking for?