All Products
Search
Document Center

Mobile Platform as a Service:Real-device preview and debugging

Last Updated:Mar 20, 2025

Mini Program IDE supports real-device preview and debugging, so you can preview the actual effect of the current code or debug on your mobile client. This topic describes how to preview and debug a mini program on a physical device, and describes the APIs used in the process.

Prerequisites

Before you use the preview and debugging feature, make sure that you have integrated this feature into your Android mini program. For information about how to integrate this feature, see MriverDebug API.

Procedure

  1. Open the Mini Program IDE configuration file named config.json that you downloaded from the mPaaS console and find the debug_url field.An example configuration file is as follows:

    {
    "login_url":"https://mappcenter.cloud.alipay.com/ide/login",
    "uuid_url":"http://cn-hangzhou-mproxy.cloud.alipay.com/switch/uuid",
    "debug_url":"wss://cn-hangzhou-mproxy.cloud.alipay.com",
    "sign":"3decfd66c2924489204b4b0f38a9c228",
    "upload_url":"https://mappcenter.cloud.alipay.com/ide/mappcenter/mds"
    }
  2. Set the debugging address through setWssHost and add /host/ at the end. The example is as follows.

    MriverDebug.setWssHost("wss://cn-hangzhou-mproxy.cloud.alipay.com/host/");
  3. Click Preview or Real Device Debugging in the upper right corner of the IDE.

    1. The IDE will generate a .zip package of the current code and upload it to the console.

    2. The console automatically creates a publishing task, generates a QR code and returns it to the IDE.

      Note

      Failure to properly set up the whitelist may cause QR code building and generation to fail. See Whitelist settings for more information.

  4. Use the mobile client to scan the QR code displayed in the IDE. After scanning the code, the console will be triggered to deliver the mini program package. The QR code is valid for 15 minutes, and a refresh button will be displayed after timeout.

  5. After the mobile client receives the mini program package, it can enter the preview or debugging interface on the mobile client.

APIs

The following section describes the APIs and parameters used during preview and debugging, and provides sample code.

MriverDebug.debugAppByScan(Activity activity)

This API is used for preview and debugging. Use mPaaS's built-in code scanning and preview mini programs.

Sample code

MriverDebug.debugAppByScan(MainActivity.this);

Parameter description

Parameter

Type

Description

Required

activity

Activity

The current activity.

Yes

MriverDebug.debugAppByUri(Activtiy activity,Uri uri)

This interface is used to jump to the mini program. It is recommended to jump to the activity of the page where the mini program is started.

Sample code

MriverDebug.debugAppByUri(MainActivity.this,intent.getData()); 

Parameter description

Parameter

Type

Description

Required

activity

Activity

The current activity.

No (but we recommend you specify it)

uri

Uri

The data returned by scanning the QR code.

No