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

umaar.com/dev-tips/96...

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

blog.csdn.net/Cougars/art...

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

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

ini 复制代码
  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,如下:

yaml 复制代码
    terserOptions: {
    compress: {
      //生产环境时移除console
      drop_console: true,
      drop_debugger: true,
    },
  },

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

相关推荐
蔗理苦31 分钟前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro1 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹1 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风1 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵2 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_2 小时前
分片上传-
前端·javascript·状态模式
东北南西2 小时前
手写React状态hook
前端·javascript·react.js
诗书画唱2 小时前
【前端教程】JavaScript DOM 操作实战案例详解
开发语言·前端·javascript