uniapp 微信小程序 调试

0x00 前言

要用uniapp开发微信小程序，首先要用uniapp搭建框架，然后再IDE里面编写代码，然后通过uniapp的打包命令，打包成微信小程序的代码。

这个过程需要调试，所以需要安装“微信开发者工具”，把上述打包后的代码导入到微信开发者工具。

如下图：

0x01 开启调试

要开启调试，点击微信开发者工具中的按钮“调试器”，如下图所示：

即可打开调试界面，看起来和浏览器的界面比较类似，调试的方式也和浏览器类似，一般都是打断点或者log日志。

0x02 断点调试

首先需要找到可以调试的代码，打开Sources标签也，找到appContext文件夹，可以看到源代码：

0x03 调试代码

要能够调试代码，需要开启sourcemap，再uniapp的项目中，打包的选项中，添加sourcemap，如下设置:

添加sourcemap后，便可以调试代码了。 可以看到ts和vue源文件。

0x04 调试的局部变量问题

调试的时候，如果存在一些变量，会发现鼠标移动到变量上的时候并不能如预期显示变量的值，这是因为代码进行了压缩，一些变量在真实的运行环境中，变量名称修改了，调试的时候，能够显示的是修改了名称的变量，比如原本的变量名称是 let total = xxxx，但是修改后，变量名称变成了t，调试的时候只能看到t而看不到total，这对于调试很不友好。
下面的文章说可以通过选项启用变量名称解析:

Chrome DevTools: Resolve Variable Names when debugging using Source Maps

https://umaar.com/dev-tips/96-resolve-variable-names/

关于JS+sourcemap调试：打开局部变量解析设置

https://blog.csdn.net/Cougars/article/details/132172125

但是发现并没有这个选项，不止微信工具没有，chrome浏览器也没有。 如果有人配置过，还请告知。
最终解决的方案是，在开发模式下不压缩代码,配置如下:

minify: process.env.NODE_ENV === "development" ? false : "terser",

  build: {
    // 开发阶段启用源码映射：https://uniapp.dcloud.net.cn/tutorial/migration-to-vue3.html#需主动开启-sourcemap
    sourcemap: process.env.NODE_ENV === "development",
    minify: process.env.NODE_ENV === "development" ? false : "terser",

  },

0x05 console不起作用问题console

console 在调试的时候很有作用，实际测试中，console不起作用，那是因为默认的压缩配置，启用了drop_console,如下：

    terserOptions: {
    compress: {
      //生产环境时移除console
      drop_console: true,
      drop_debugger: true,
    },
  },

当然如果，不启用minify的情况下，这个也就不会生效了。

最后，关注公号“ITMan彪叔” 可以添加作者微信进行交流，及时收到更多有价值的文章。