Mobile Debugging

Mobile Debugging allows you to inspect a debug app running on your device using the same developer tools you are familiar with for debugging websites. This comes in particularly handy for getting to the bottom of issues that are only present once the app is running on a device and can't be debugged from the web preview.


Notes:

  • Only Debug builds can connected to Mobile Debugging.
  • iOS Debug apps can only be debugged using Safari on a MacOS machine
  • Android Debug apps can be debugged by any Chromium Browser


Debugging iOS Apps


First Time Setup

  1. Enable Web Inspector on Your iOS Device:
    • Go to Settings on your iOS device.
    • Navigate to Safari.
    • Enable the "Web Inspector" option.
  2. Open Safari and Enable Developer Menu:
    • Open Safari on your Mac.
    • Go to Safari > Preferences.
    • Click on the "Advanced" tab.
    • Enable the "Show Develop menu in menu bar" option.

Connecting to Mobile Debugging

  1. Connect Your iOS Device to Your Mac:
    • Use a USB cable to connect your iOS device to your Mac.
    • Unlock your iOS device and trust the connection if prompted.
  2. Launch Your iOS Debug Build on Your iOS Device:
  3. Inspect Your AppPresser App:
    • On your Mac, go to the menu bar and click on Develop.
    • You should see your connected iOS device listed. Hover over it to reveal the list of open web pages.
    • Select your app from the list to open the Safari Web Inspector.
    • This will open a new Safari window where you can inspect and debug your AppPresser application running on your iOS device, just like you would for a web application.

Debugging Android Apps


First Time Setup

  1. Enable USB Debugging on Your Android Device:
    • Go to Settings on your Android device.
    • Navigate to Developer Options (if you don't see Developer Options, go to About Phone and tap on Build Number 7 times to enable it).
    • Enable USB debugging.

Connecting to Mobile Debugging

  1. Connect Your Android Device to Your Computer:
    • Use a USB cable to connect your Android device to your computer.
    • Make sure to select "File Transfer" or "Media Transfer Protocol (MTP)" mode on your device when prompted.
  2. Open Your Android Debug App on your device
  3. Open Chrome and Navigate to Chrome://inspect:
    • Open Google Chrome on your computer.
    • In the address bar, type chrome://inspect and press Enter.
    • This will open the Chrome DevTools page.
  4. Inspect Your AppPresser App:
    • In the Chrome DevTools page, under the "Remote Target" section, you should see your connected Android device and your Ionic application listed.
    • Click on the "inspect" link below your Ionic application.
    • This will open a new DevTools window where you can inspect and debug your AppPresser application running on your Android device, just like you would for a web application.