Loading...
Loading...
Comprehensive debugging guide for Capacitor applications. Covers WebView debugging, native debugging, crash analysis, network inspection, and common issues. Use this skill when users report bugs, crashes, or need help diagnosing issues.
npx skill4agent add cap-go/capacitor-skills debugging-capacitor| Platform | WebView Debug | Native Debug | Logs |
|---|---|---|---|
| iOS | Safari Web Inspector | Xcode Debugger | Console.app |
| Android | Chrome DevTools | Android Studio | adb logcat |
const config: CapacitorConfig = {
ios: {
webContentsDebuggingEnabled: true, // Required for iOS 16.4+
},
};const config: CapacitorConfig = {
android: {
webContentsDebuggingEnabled: true,
},
};chrome://inspect// .vscode/launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Attach to Android WebView",
"port": 9222,
"webRoot": "${workspaceFolder}/dist"
}
]
}bunx cap open iosbreakpoint set --name methodName# Print variable
po myVariable
# Print object description
p myObject
# Continue execution
continue
# Step over
next
# Step into
step
# Print backtrace
btbunx cap open android# Evaluate expression
myVariable
# Run method
myObject.toString()package:com.yourapp// Basic logging
console.log('Debug info:', data);
console.warn('Warning:', issue);
console.error('Error:', error);
// Grouped logs
console.group('API Call');
console.log('URL:', url);
console.log('Response:', response);
console.groupEnd();
// Table format
console.table(arrayOfObjects);
// Timing
console.time('operation');
// ... operation
console.timeEnd('operation');import os.log
let logger = Logger(subsystem: "com.yourapp", category: "MyPlugin")
// Log levels
logger.debug("Debug message")
logger.info("Info message")
logger.warning("Warning message")
logger.error("Error message")
// With data
logger.info("User ID: \(userId)")
// Legacy NSLog (shows in Console.app)
NSLog("Legacy log: %@", message)import android.util.Log
// Log levels
Log.v("MyPlugin", "Verbose message")
Log.d("MyPlugin", "Debug message")
Log.i("MyPlugin", "Info message")
Log.w("MyPlugin", "Warning message")
Log.e("MyPlugin", "Error message")
// With exception
Log.e("MyPlugin", "Error occurred", exception)# iOS - Check crash logs
xcrun simctl spawn booted log stream --level debug | grep -i crash
# Android - Check logcat
adb logcat *:E | grep -i "fatal\|crash"bunx cap synccd ios/App && pod installError: "MyPlugin" plugin is not implemented on ios/androidimport { Capacitor } from '@capacitor/core';
// Check if plugin exists
console.log('Plugins:', Capacitor.Plugins);
console.log('MyPlugin available:', !!Capacitor.Plugins.MyPlugin);bun add @capgo/plugin-namebunx cap sync// Add request interceptor
const originalFetch = window.fetch;
window.fetch = async (...args) => {
console.log('Fetch:', args[0]);
try {
const response = await originalFetch(...args);
console.log('Response status:', response.status);
return response;
} catch (error) {
console.error('Fetch error:', error);
throw error;
}
};<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>server: {
cleartext: true, // Only for development!
}import { CapacitorHttp } from '@capacitor/core';
const response = await CapacitorHttp.request({
method: 'GET',
url: 'https://api.example.com/data',
});import { Permissions } from '@capacitor/core';
// Check permission status
const status = await Permissions.query({ name: 'camera' });
console.log('Camera permission:', status.state);<key>NSCameraUsageDescription</key>
<string>We need camera access to scan documents</string><uses-permission android:name="android.permission.CAMERA" />dist/webDir# Rebuild web assets
bun run build
# Sync to native
bunx cap sync
# Check config
cat capacitor.config.tsimport { App } from '@capacitor/app';
App.addListener('appUrlOpen', (event) => {
console.log('Deep link:', event.url);
});// Mark performance
performance.mark('start');
// ... operation
performance.mark('end');
performance.measure('operation', 'start', 'end');
const measures = performance.getEntriesByName('operation');
console.log('Duration:', measures[0].duration);# Run with Leaks instrument
xcrun instruments -t Leaks -D output.trace YourApp.appdebugImplementation 'com.squareup.leakcanary:leakcanary-android:2.12'rm -rf node_modules && bun install