SuperApp:Preview and debug a miniapp

You can preview and debug miniapps in Visual Studio Code or by using the Visual Studio Code extension for WindVane on an Android or iOS simulator.

• If you do not need to debug WindVane JavaScript APIs, use Visual Studio Code.

• If you need to debug WindVane JavaScript APIs, use the Visual Studio Code extension for WindVane on an Android or iOS simulator.

This topic describes the methods for previewing and debugging miniapps.

Preview and debug miniapps in Visual Studio Code

1. In Visual Studio Code, click Preview Miniapp. Specify whether to run the npm start command from the drop-down list that appears in the upper part of Visual Studio Code.

   • Yes (The miniapp can be previewed.): Your miniapp is running. You can preview your miniapp by entering the URL of the miniapp. If you select this option, a text box appears in the upper part of Visual Studio Code. Enter the URL of your miniapp. The preview window appears.

   • No (The miniapp must be started first.'npm start' or start command will be called.): Your miniapp is not started. You must run the npm start command to start the miniapp. If you select this option, the Visual Studio Code extension for WindVane runs the npm start command in the CLI of your on-premises device to start the miniapp. After the miniapp is started, a text box appears in the upper part of the Visual Studio Code extension for WindVane. You can enter the URL that is displayed in the npm start log to open the preview window.

     

2. Enter the URL of your miniapp in the text box that appears in the upper part of Visual Studio Code.

   Note

   npm packages are used to develop, start, and manage miniapps. You can run the npm start command to start your miniapp. If you cannot start your miniapp by running the npm start command, you can modify the EMAS:Start Command parameter in the settings of the Visual Studio Code extension for WindVane to specify the startup command for miniapps. After you start your miniapp, an on-premises server on which the miniapp is started is created in Node.js. You can preview your miniapp on the on-premises server. To preview your miniapp, you must specify the URL of the on-premises server on which your miniapp runs. This URL is the preview URL of the miniapp and is in the http://localhost:<Port number> or http://<IP address of your on-premises device>:<Port number> format.

   For example, after the scaffolding project for your miniapp is initialized by using the Visual Studio Code extension for WindVane, the default port 3000 is used. You can enter http://<IP address of your on-premises device>:3000 in the Visual Studio Code extension for WindVane to preview your miniapp. If port 3000 is occupied, the CLI notifies you to change the port number when you run the npm start command. If you change the port number to 3001, you can enter http://<IP address of your on-premises device>:3001 to preview the miniapp.

   

   After you enter the preview URL of the miniapp, the preview window appears in the Visual Studio Code extension for WindVane, as shown in the following figure.

3. Run the Developer: Toggle Developer Tools command to go to the debugging console, and debug the miniapp in Visual Studio Code.

   

Android simulator

1. Click Preview Miniapp in Android Emulator to start the Android simulator.

   

2. After the simulator is started, a text box appears in the upper part of Visual Studio Code. Enter the preview URL of your miniapp.

   Note

   To preview a miniapp on a simulator, the miniapp must be running and the URL of the miniapp must be available. If you cannot obtain the URL of the miniapp, the miniapp may not be in the running state. You can click Preview Miniapp and select the No(The miniapp must be started first.'npm start' or start command will be called) option in the message that appears to start the miniapp. You can also run the npm start command in the CLI of your on-premises device to start the miniapp.

   After the miniapp is started, a preview URL is generated for the miniapp. The URL is in the http://localhost:<Port number> or http://<IP address of your on-premises device>:<Port number> format. For example, if you use the template that is provided by the Visual Studio Code extension for WindVane to initialize the scaffolding project, the following preview URL is generated: http://<IP address of your on-premises device>:3000.

3. After you enter the URL, the simulator starts the scaffolding and loads the miniapp URL.

   Open Chrome and enter chrome://inspect/#devices in the address bar. The simulator information is displayed on the page that appears. The WebView object in which you can debug the miniapp appears in Chrome after the scaffolding is started.

   

4. Click inspect below the simulator information in DevTools, and then debug the miniapp in the WebView object.

   

iOS simulator

1. Open Safari, choose Safari > Preferences > Advanced, and then select Show Develop menu in menu bar to enable the Safari Developer feature.

   

2. Click Preview Miniapp in iOS Emulator to start the iOS simulator. If multiple simulators are available on your on-premises device, a drop-down list appears. You must specify a simulator for the Visual Studio Code extension for WindVane to start the simulator.

3. After the simulator is started, a text box appears in the upper part of Visual Studio Code. Enter the preview URL of your miniapp.

   Note

   To preview a miniapp on a simulator, the miniapp must be running and the URL of the miniapp must be available. If you cannot obtain the URL of the miniapp, the miniapp may not be in the running state. You can click Preview Miniapp and select the No(The miniapp must be started first.'npm start' or start command will be called) option in the message that appears to start the miniapp. You can also run the npm start command in the CLI of your on-premises device to start the miniapp.

   After the miniapp is started, a preview URL is generated for the miniapp. The URL is in the http://localhost:<Port number> or http://<IP address of your on-premises device>:<Port number> format. For example, if you use the template that is provided by the Visual Studio Code extension for WindVane to initialize the scaffolding project, the following preview URL is generated: http://<IP address of your on-premises device>:3000.

   

4. In Safari, choose Develop > Simulator. All WebView objects that you can inspect are displayed.

   

5. Click the WebView object that you want to inspect, and then debug the miniapp in Web Inspector.