Testing and Debugging

Developer Menu

Access by tapping Version number in More > About 7 times.

Features:

• Clear cache
• Reset settings
• View logs
• Export debug info
• Test notifications

Console Logging

// Basic logging
console.log('Info:', data);
console.warn('Warning:', message);
console.error('Error:', error);

// JSON pretty print
console.log(JSON.stringify(object, null, 2));

// Group logs
console.group('Loading manga');
console.log('Source:', sourceId);
console.log('Manga:', mangaId);
console.groupEnd();

View logs in:

• Metro bundler terminal
• React Native Debugger
• Flipper

Developer Service

import { developerService } from '../services/developerService';

// Check if dev mode enabled
const isDevMode = await developerService.isDevModeEnabled();

// Enable dev mode
await developerService.enableDevMode();

// Clear all data
await developerService.clearAllData();

// Export logs
const logs = await developerService.exportLogs();

Common Issues

Metro Bundler

# Start with cache clear
npx expo start -c

# Verbose output
npx expo start --verbose

# Reset cache completely
rm -rf node_modules/.cache
npx expo start -c

React DevTools

# Install globally
npm install -g react-devtools

# Run
react-devtools

Then shake device and select "Debug with React DevTools".

Network Debugging

// Log all fetch requests (dev only)
if (__DEV__) {
  const originalFetch = global.fetch;
  global.fetch = async (...args) => {
    console.log('Fetch:', args[0]);
    const response = await originalFetch(...args);
    console.log('Response:', response.status);
    return response;
  };
}

Performance Profiling

// Measure render time
const start = performance.now();
// ... render
console.log(`Render took ${performance.now() - start}ms`);

// Use React.memo for expensive components
const MemoizedComponent = React.memo(ExpensiveComponent);

// Profile with why-did-you-render
if (__DEV__) {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React);
}

Build Debugging

# Android - view build logs
cd android && ./gradlew assembleRelease --info

# iOS - verbose build
npx expo run:ios --verbose

# Check native dependencies
npx expo-doctor

Crash Reports

// Global error handler
ErrorUtils.setGlobalHandler((error, isFatal) => {
  console.error('Global error:', error);
  // Log to service
});

// Unhandled promise rejections
if (__DEV__) {
  require('promise/setimmediate/rejection-tracking').enable({
    allRejections: true,
    onUnhandled: (id, error) => {
      console.warn('Unhandled promise:', error);
    },
  });
}

Test Builds

# Android debug APK
cd android && ./gradlew assembleDebug

# iOS simulator build
npx expo run:ios --configuration Debug

# EAS preview build
eas build --platform android --profile preview