uni-app web版调试

HBuilderX 3.5.0版本，uni-app 运行到 web 平台，可通过 HBuilder自带的调试面板进行调试。

简介

• 运行uni-app到web后，支持在HBuilder自带的调试面板中调试js代码。
• 调试需要本机安装chrome浏览器，因为使用了chrome debug 协议
• 调试支持的文件类型：vue文件、nvue文件、ts文件、js文件，断点只能打在js或ts代码中，请勿在vue文件template、style节点添加断点。

注意事项：

1. uni-app，某些生命周期方法内，添加断点，debug调试后，断点无法进入。
2. uni-app Vue3项目，debug调试后，可能会在 HBuilderX 内打开一个虚拟目录的文件，如/localhost:3000/src/pages/index/index.vue。Debug调试视图，点击继续即可。

开启调试

项目管理器，选中任意 uni-app项目，运行到Chrome。控制台右上角，点击debug图标（红色虫子），即可打开调试。如下图：

uni-app web调试，依赖debug插件，弹窗提示安装依赖插件，请务必点击安装，否则无法进行调试。

添加/删除断点

打开要调试的文件，在js或ts代码行号上，鼠标右击或双击添加断点。

调试视图

开启调试后，即可在HBuilderX左侧视图，看到调试视图，具体如下：

调试视图分为5部分：

• 调试工具栏
• 变量窗口 (复制值、复制表达式、添加到监视)
• 监视窗口（包含添加/编辑/删除表达式，以及复制值）
• 调用堆栈窗口
• 断点窗口（包含删除/启用/禁用断点）

调试操作

• 继续 F8
• 下一步 F10
• 进入 F11
• 返回 Shift+F11

继续

继续(F8)：点击后，运行直到下一个断点。

数据检查和查看变量

添加到监视

在【变量窗口】，选中变量，右键菜单，即可将变量添加到监视窗口。

悬停显示

断点调试过程中，将鼠标悬停在要查看的变量上，即可打开悬停窗口。