Skip to main content

Testing Your Showpad App

Local Testing​

App Extension Required

In order to test an Extension locally, your app must include the corresponding Extension Type. For example, if you want to test an Admin Settings extension, you app must include an the Admin Settings extension type.

The following steps demonstrate testing an Admin Settings extension:

  1. In the root folder of your app, run your extension locally by starting your local server.

  2. In the Online Platform, click the gear icon and select Admin Settings.

  3. In the Showpad Apps section, select your extension and click the code icon ( </> ):

    admin settings test

  4. Enable developer mode by entering the URL of your local host to render it within the Showpad platform:

    developer mode

That's it! You're ready to test your app locally.

info

If you don’t have an appropriate Extension Type in your app yet, you can use our Testing App:

  • Assign the Testing App to your organization.
  • Install the Testing App in your Showpad instance.

Staging​

Nearly all modern web browsers include powerful developer tools to inspect HTML, CSS and JavaScript. These tools enable you to directly interact with the source code so you can track down issues and ensure that your Showpad App works correctly.

Mobile​

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

//responsive code

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