uni-app H5 Chrome调试@h5-debug

HBuilderX 3.3.6+版本，uni-app 运行h5，支持Chrome调试

简介@introduction

• 目前，uni-app 仅支持运行到chrome、内置浏览器进行调试。支持uni-app和uni-app cli项目。
• 调试需要本机安装chrome浏览器
• 调试支持的文件类型：vue文件、nvue文件、ts文件、js文件，请勿在vue文件template、style节点添加断点。

开启调试@start-debug

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

uni-app H5调试，依赖chrome-debug插件，弹窗提示安装【node-debug】插件，请务必点击安装，否则无法调试插件。如下图：

添加/删除断点@add-breakpoint

打开要调试的文件，在行号上，鼠标右击。

备注：调试支持的文件类型：vue文件、nvue文件、ts文件、js文件，请勿在vue文件template节点添加断点。

调试视图@DebugView

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

调试视图分为5部分：

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

调试操作@DebugActions

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

继续@Continue

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

数据检查和查看变量@data

添加到监视@add-to-watch

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

悬停显示@hover

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