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:
- 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
Didn't find tool you were looking for?