How to debug Ionic and Capacitor apps on iOS and Android with Inspect?

Inspect helps you debug Ionic and Capacitor apps by giving you an all-in-one developer tool for macOS, Windows, and Linux.

Since Ionic and Capacitor apps run inside a WebView, you can use Inspect to debug them just like you would debug any web application, with full access to the DOM, Console, Network, and more.

Capacitor apps are hybrid mobile apps that use web technologies (HTML, CSS, JavaScript) wrapped in a native WebView container. Inspect connects to these WebViews and gives you a full debugging experience across both iOS and Android.

Prerequisites

1. macOS, Windows, or Linux
2. An Ionic/Capacitor app built for iOS or Android
3. For iOS: iPhone or iPad with iOS 11 or later, USB cable or Wi-Fi (on macOS)
4. For Android: Android device with USB debugging enabled, ADB installed

Steps for iOS

1. Download Inspect by going to our download page.
2. Enable Web Inspector on your iOS device: Go to Settings → Safari → Advanced and enable Web Inspector.
3. Build and run your Capacitor app: Use npx cap run ios or open the project in Xcode and run it on your device.
4. Connect your iOS device to your computer via USB cable or Wi-Fi.
5. Start Inspect and your device will appear with all debuggable WebViews listed.
6. Click on your Ionic/Capacitor app to start debugging.

Steps for Android

1. Download Inspect by going to our download page.
2. Enable USB Debugging: Go to Developer Options on your Android device and enable USB Debugging. See Android's official documentation for instructions.
3. Ensure WebView debugging is enabled: Capacitor enables this by default for debug builds. You can verify with WebView.setWebContentsDebuggingEnabled(true) in your app.
4. Build and run your Capacitor app: Use npx cap run android or open the project in Android Studio and run it on your device.
5. Connect your Android device to your computer via USB cable and confirm trust permissions.
6. Start Inspect and your device will appear with all debuggable WebViews listed.

Using Live Reload for Faster Debugging

The Ionic CLI includes Live Reload functionality which reloads your app whenever you make code changes, without needing to rebuild the native binary:

This is especially useful during development as it allows you to see changes instantly while still having access to native device features.

Useful Capacitor CLI Commands

Why Use Inspect?

While you can use Safari Web Inspector for iOS or Chrome DevTools for Android, Inspect provides a unified experience across both platforms and works on macOS, Windows, and Linux. No need to switch between different tools or deal with platform-specific setup.

Happy Inspecting!