All Products
Search

This Product

    SuperApp:Preview and debug a MiniApp

    Document Center

    SuperApp:Preview and debug a MiniApp

    Last Updated:Jun 02, 2026

    Preview and debug MiniApps using Visual Studio Code (VS Code) or the VS Code extension for WindVane on an Android or iOS simulator.

    • Use VS Code if you do not need to debug WindVane JavaScript APIs.

    • Use the VS Code extension for WindVane on an Android or iOS simulator if you need to debug WindVane JavaScript APIs.

    Preview a MiniApp in VS Code

    1. Click Preview MiniApp in VS Code. A prompt asks whether npm start has been run. Select the option that matches the current state of your MiniApp.

    2. Option 1: Yes (The MiniApp can be previewed.)

      The MiniApp service is already running locally. Preview it directly via a URL.

      1. Select 「Yes (The MiniApp can be previewed.)」.

      2. A text input box appears at the top of VS Code.

      3. Enter the preview URL (for example, http://localhost:3000).

      4. The plugin opens the browser and displays the preview.

      Option 2: No (The MiniApp must be started first.)

      The MiniApp is not running. The plugin starts it by running npm start.

      1. Select 「No (The MiniApp must be started first.)」.

      2. The WindVane MiniApp plugin runs npm start in the terminal.

      3. After the service starts, a text input box appears at the top of VS Code.

      4. Enter the URL shown in the npm start log output.

      5. The plugin opens the browser and loads the preview page.

    Note

    1. Startup command

    • The application is started using npm start by default.

    • To use a different startup command (for example, npm run dev), go to Settings, search for SuperApp: Start Command, and set your custom command.

    2. Local server

    • When the service starts, Node.js creates a local server that makes the MiniApp accessible in a browser.

    3. Preview URL

    • The preview URL is the local server address, in one of these formats:

      • http://localhost:<port>

      • http://<local-IP>:<port>

    4. Port information (scaffolding example)

    • MiniApps initialized with the plugin scaffolding use port 3000 by default.

    • Preview the app at http://<local-IP>:3000 after startup.

      • If port 3000 is already in use, npm prompts you to switch to another port (for example, 3001). If you confirm, the preview URL changes to http://<local-IP>:3001.

    image

    Enter the URL: image

    Successful preview:

    image

    • Run the Developer: Toggle Developer Tools command to open the debugging console and debug the MiniApp in VS Code.

    • image

    Preview and debug MiniApps on a simulator

    Important

    After you preview a MiniApp on a simulator for the first time, the debug app is installed. Subsequent previews do not reinstall it. If you encounter JSAPI call exceptions, the simulator may be running an outdated debug app. Manually uninstall the debug app from the simulator and preview again to get the latest version.

    Android emulator

    1. Click Preview MiniApp in Android Emulator to start the Android emulator.

      image

    2. After the emulator starts, a text box appears at the top of VS Code. Enter the preview URL of your MiniApp.

      Note

      The MiniApp must be running before you can preview it on an emulator. If you do not have the URL, the MiniApp may not be started. To start it, click Preview MiniApp and select No(The MiniApp must be started first.'npm start' or start command will be called). Alternatively, run npm start in the CLI on your local device.

      The preview URL is in the http://localhost:<Port number> or http://<IP address of your local device>:<Port number> format. For example, if you initialized the project using the WindVane scaffolding template, the URL is http://<IP address of your local device>:3000.

      截屏2023-06-19 15.png

    3. After you enter the URL, the emulator starts the scaffolding and loads the MiniApp.

      Open Chrome and go to chrome://inspect/#devices. The emulator information and the WebView object appear after the scaffolding starts.

      image

    4. Click inspect below the emulator information in DevTools to debug the MiniApp in the WebView object.

      image

    iOS simulator

    1. In Safari, choose Safari > Preferences > Advanced, and select Show Develop menu in menu bar to enable Safari developer tools.

      image

    2. Click Preview MiniApp in iOS Emulator to start the iOS simulator. If multiple simulators are available on your local device, select one from the drop-down list. You must specify a simulator for the VS Code extension for WindVane to start the simulator. image截屏2023-06-19 16.png

    3. After the simulator starts, a text box appears at the top of VS Code. Enter the preview URL of your MiniApp.

      Note

      The MiniApp must be running before you can preview it on a simulator. If you do not have the URL, the MiniApp may not be started. To start it, click Preview MiniApp and select No(The MiniApp must be started first.'npm start' or start command will be called). Alternatively, run npm start in the CLI on your local device.

      The preview URL is in the http://localhost:<Port number> or http://<IP address of your local device>:<Port number> format. For example, if you initialized the project using the WindVane scaffolding template, the URL is http://<IP address of your local device>:3000.

      截屏2023-02-28 17

    4. In Safari, choose Develop > Simulator. All inspectable WebView objects are listed.

      image

    5. Click the WebView object you want to inspect and debug the MiniApp in Web Inspector.

      image