This page is translated by Google Cloud Translation API

Switch to Chinese

uni-app web version debugging

HBuilderX 3.5.0 version, uni-app runs on the web platform, and can be debugged through the debugging panel that comes with HBuilder.

Introduction

• After running uni-app to the web, it supports debugging js code in the debugging panel that comes with HBuilder.
• Debugging requires the chrome browser to be installed locally, because the chrome debug protocol is used
• Debugging supported file types: vue file, nvue file, ts file, js file, breakpoints can only be placed in js or ts code, do not add breakpoints to template and style nodes in vue files point.

Precautions:

1. uni-app, in some life cycle methods, add breakpoints, after debug debugging, breakpoints cannot be entered.
2. For the uni-app Vue3 project, after debugging, a file in a virtual directory may be opened in HBuilderX, such as /localhost:3000/src/pages/index/index.vue. Debug debug view, click Continue.

Enable debugging

Project Manager, select any uni-app project, run to Chrome. In the upper right corner of the console, click the debug icon (red bug) to enable debugging. As shown below:

uni-app web debugging, depends on the debug plug-in, the pop-up window prompts to install the dependent plug-in, be sure to click install, otherwise the debugging cannot be performed.

Add/remove breakpoints

Open the file to be debugged, right-click or double-click on the js or ts code line number to add a breakpoint.

Debug View

After enabling debugging, you can see the debugging view in the left view of HBuilderX, as follows:

调试视图分为5部分：

• 调试工具栏
• Variable window (Copy Value, Copy Expression, Add to Watch)
• Watch window (including add/edit/delete expressions, and copy value)
• Call stack window
• Breakpoints window (contains delete/enable/disable breakpoints)

Debug actions

• 继续 F8
• Next F10
• Enter F11
• go back to Shift+F11

Continue

Continue (F8): When clicked, run until the next breakpoint.

Data check and view variable

Add to watch

In the [Variable window], select the variable, right-click the menu, you can add the variable to the monitoring window.

Hover to show

During breakpoint debugging, hover the mouse over the variable you want to view to open the hover window.