Skip to main content

Mobile Debugging

Legacy Process

The information here applies only for Showpad Apps v1 (deprecated). While your existing v1 Showpad Apps will continue to work, we strongly recommend:

Showpad provides user-friendly interfaces that resemble the developer tools found in desktop web browsers. Once your device is connected, you can interact with your web content in real time.

This great feature makes it easier to diagnose and fix issues during the development stage on:

  • Pages
  • Experiences
  • Customizable HomePages
FEATURE ACTIVATION REQUIRED

Please contact your Showpad Customer Success Manager if you're interested in using this feature.

iOS - Web Inspector​

Prerequisites
  • Basic understanding of Web debugging skills
  • iOS/iPadOS 16.4 or later
  • Running MacOS
  • Safari browser or Safari technology preview
  • Showpad iOS app version 8.14.0 or later

Web Inspector provides an easy and practical way to inspect the resources and activity on a web page. You can leverage this handy tool to inspect elements and debug specific issues.

Enable the inspector​

To activate the inspector:

  1. Navigate to your device's settings.



  2. Scroll down to Safari's settings.



  3. Open the "Advanced" section.



  4. Toggle the "Web Inspector" option.



ios Web Inspector

Open the inspector​

To access the inspector:

  1. Connect your iOS device to your Mac.

  2. Open the Page/Experience/Customizable HomePage you want to debug in the Showpad Web App and make sure that it stays open.

  3. In Safari's developer menu, locate your device's name, and open the inspector from there.

    open

Troubleshooting​

IssueSolution
You have connected your device and are not seeing the inspector.Unplugging and replugging your device usually resolves this issue.
You are running a beta iOS or iPadOS version.Be sure to use Safari technology preview.

Android - Inspect WebViews​

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster.

One of these tools is WebViews. They're used to display the web pages within an application. This allows you to inspect and debug your custom Showpad Apps while they run within the Showpad Android application.

Prerequisites
  • Basic understanding of Web debugging skills
  • Showpad Android app version 5.6.0 or later
  • Chrome browser

Enable USB Debugging​

Perform the following steps on your Android device:

  1. Navigate to your device's settings.



  2. Open Developer Options.



  3. Enable USB debugging.



Android WebView

Discover Device​

  1. In a Chrome browser search bar on your device, enter: “chrome://inspect"

  2. Connect your Android device to your development machine. If you are connecting your device for the first time, the device will show up as "Offline" and pending authentication.

  3. Under the WebView you want to debug, click Inspect.

    webview

Troubleshooting​

IssueSolution
You have connected your device and are not seeing the WebViews.Unplugging and replugging your device usually resolves this issue.
USB Debugging is enabled, but won't connect.You can try one of the following options:

  • Switch USB Connection Mode
    1. Swipe down from the top of the phone screen to open the phone notification bar. If the USB connection option isn't shown in the notification bar, disconnect and reconnect the device.
    2. Find the USB connection option of the Android System and select a connection mode in the connection options.
    3. Click OK and wait for a moment. If this connection mode is valid, the program will respond accordingly.

  • Reopen Developer Mode and enable USB Debugging
    1. Navigate to your device's settings.
    2. Open Developer Options.
    3. Disable USB debugging.
    4. Close Developer Options.
    5. Reopen Developer Options and renable USB debugging