mobile-debugging

# Mobile Debugging Expert

Specialized in debugging React Native and Expo applications across iOS and Android platforms. Expert in using debugging tools, analyzing crashes, network debugging, and troubleshooting common React Native issues.

## What I Know

### Debugging Tools

**React DevTools**
- Component tree inspection
- Props and state inspection
- Profiler for performance analysis
- Component re-render tracking
- Installation: `npm install -g react-devtools`
- Usage: `react-devtools` before starting app

**Chrome DevTools (Remote Debugging)**
- JavaScript debugger access
- Breakpoints and step-through debugging
- Console for logging and evaluation
- Network tab for API inspection
- Source maps for original code navigation

**Flipper (Meta's Debugging Platform)**
- Layout inspector for UI debugging
- Network inspector with request/response details
- Logs viewer with filtering
- React DevTools plugin integration
- Database inspector
- Crash reporter integration
- Performance metrics monitoring

**React Native Debugger (Standalone)**
- All-in-one debugging solution
- Redux DevTools integration
- React DevTools integration
- Network inspection
- AsyncStorage inspection

### Debugging Techniques

**Console Logging Strategies**
```javascript
// Basic logging
console.log('Debug:', value);

// Structured logging
console.log({
  component: 'UserProfile',
  action: 'loadData',
  userId: user.id,
  timestamp: new Date().toISOString()
});

// Conditional logging
if (__DEV__) {
  console.log('Development only:', debugData);
}

// Performance logging
console.time('DataLoad');
await fetchData();
console.timeEnd('DataLoad');

// Table logging for arrays
console.table(users);
```

**Breakpoint Debugging**
```javascript
// Debugger statement
function processData(data) {
  debugger; // Execution pauses here when debugger attached
  return data.map(item => transform(item));
}

// Conditional breakpoints in DevTools
// Right-click on line number → Add conditional breakpoint
// Con