微信开发者工具运行调试

环境

• Windows 11 专业版
• HBuilder X 4.65
• 微信开发者工具 Stable 1.06.2412050

背景

在HBuilder X里，运行 -> 运行到小程序模拟器 -> 微信开发者工具，如下图所示：

注：无需事先打开微信开发者工具。

微信开发者工具调试

断点单步调试

在微信开发者工具里可以设置断点，以单步调试代码。具体方法为：调试器 -> Sources -> appContext -> uni-app:// ，然后在里面找到页面文件，比如 index.vue ，然后双击打开文件，在源代码左边的行号处单击即可设置断点，如下图所示：

然后就可以单步调试代码了，常用快捷键：

• F8 ：Resume execution
• F10 ：Step over
• F11 ：Step into
• Shift + F11 ：Step out of current function

此外，在右侧可以看到，有Watch，Call Stack，Breakpoints等信息，和其它IDE环境类似，不再赘述。

修改变量的值

在单步调试时，使用watch，可以查看变量或者表达式的值，但有时我们会希望把变量的值改成指定值。比如下面的 if 语句：

if (x > 0) {
    ......
} else {
    ......
}

断点设置在 if 语句，假设当前 x 值为1，因此接下来会走true分支，而我们希望走false分支，所以就要把 x 的值改为0。

要想这么做的话，只需切换到 Source 左边的 Console 页签，在这里可以设置变量的值。

下面看一个完整的例子：

从上图可以看到， cityTime 当前值为 1747880148100 。现在我希望把 cityTime 设置为 1 。

切换到 Console 页签，首先输入 cityTime 并回车，确认其当前值：

然后，直接在命令行给 cityTime 赋值即可：

切换回 Sources 页签，可以看到， cityTime 的值已经变成 1 了：

注：从右边两个红框可以看到， cityTime 的值还是旧值，这可能是因为因为UI上没有刷新的缘故，实际上 cityTime 的值已经变化了。

单步运行第154行，然后切换到 Console 页签，可以看到，实际输出结果是 1 ：

Storage

对于Storage的变量，有两种修改方法：

• 方法1：和前面一样，在Console里通过代码设置，比如：

uni.setStorage({
    key: 'cityTime',
    data: 1,
    success: function() {
        //
    },
})

• 方法2：直接在 Storage 页签查看和修改变量：

注：这样修改貌似无效，看着值是修改了，但实际上值并没有变化……不知道是哪里出了问题？