Debugging Capacitor Applications

Complete guide to debugging Capacitor apps on iOS and Android.

When to Use This Skill

• User reports app crashes
• User needs to debug WebView/JavaScript
• User needs to debug native code
• User has network/API issues
• User sees unexpected behavior
• User asks how to debug

Quick Reference: Debugging Tools

Platform	WebView Debug	Native Debug	Logs
iOS	Safari Web Inspector	Xcode Debugger	Console.app
Android	Chrome DevTools	Android Studio	adb logcat

WebView Debugging

iOS: Safari Web Inspector

1. Enable on device:

   • Settings > Safari > Advanced > Web Inspector: ON
   • Settings > Safari > Advanced > JavaScript: ON

2. Enable in Xcode (capacitor.config.ts):

const config: CapacitorConfig = {
  ios: {
    webContentsDebuggingEnabled: true, // Required for iOS 16.4+
  },
};

3. Connect Safari:

   • Open Safari on Mac
   • Develop menu > [Device Name] > [App Name]
   • If no Develop menu: Safari > Settings > Advanced > Show Develop menu

4. Debug:

   • Console: View JavaScript logs
   • Network: Inspect API calls
   • Elements: Inspect DOM
   • Sources: Set breakpoints

Android: Chrome DevTools

1. Enable in config (capacitor.config.ts):

const config: CapacitorConfig = {
  android: {
    webContentsDebuggingEnabled: true,
  },
};

2. Connect Chrome:

   • Open Chrome on computer
   • Navigate to chrome://inspect
   • Your device/emulator should appear
   • Click "inspect" under your app

3. Debug features:

   • Console: JavaScript logs
   • Network: API requests
   • Performance: Profiling
   • Application: Storage, cookies

Remote Debugging with VS Code

Install "Debugger for Chrome" extension:

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Android WebVie...