SuperApp:Debugging

Running methods

• Run a uni-app miniapp by using HBuilderX

  In HBuilderX, you can run a uni-app miniapp by using one of the three methods:

  1. On the top navigation bar, choose Run > Mobile App Playground > Android Run or iOS Run.

     

     Note

     HBuilderX does not come with an emulator. If no device is detected, install the emulator through Android Studio or XCode.

     

  2. Click the button in the toolbar and then select Android Run or iOS Run.

     

     Note

     You can customize the items in the menu that appears after you click the run button in the toolbar.

  3. Use the Ctrl+R shortcut to run the uni-app miniapp.

     In the menu that appears after you use the shortcut, you can select the items by pressing keys.

     • Press Enter to select the first item in the menu.

     • Press a number to select the item corresponding to the number.

       If the menu does not appear, the file opened in HBuilderX may be not in your uni-app miniapp project. Open a file in your uni-app miniapp project and try again.

• Run a uni-app miniapp by using vue-cli

  npm run dev:%PLATFORM%
  npm run build:%PLATFORM%

For more information about the value of %PLATFORM%, see the official tutorial.

Debugging methods

Use development tools of other platforms to debug a uni-app miniapp

When you run a uni-app miniapp by using development tools of other platforms such as WeChat and AliPay, you can view the running information about the miniapp, such as the console and network requests, in the console of these development tools.

You can view the nodes and styles by selecting corresponding elements, which is the same as the method used to debug common web projects. The following figure shows an example.

To debug JavaScript files, you must click the Sources tab and select the JavaScript file that you want to debug in the corresponding directory of the source map. If the JavaScript code is compressed, click the curly brackets ({}) to view the code. The following figure shows an example.