WeChat_DevTools 断点调试方法总结

新建工程,以小程序 login 调试为例,代码如下:

javascript 复制代码
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        debugger;
        resThis = this;
        wx.showModal({
          title: '登录成功',
          content: 'res.code = ' + res.code,
          complete: (res) => {
            if (res.cancel) { }
        
            if (res.confirm) { }
          }
        })
        console.debug("res.code = " + res.code);
      },
      timeout: res => {
        debugger;
        wx.showModal({
          title: '登录超时',
          content: 'res.code = ' + res.errMsg,
          complete: (res) => {
            if (res.cancel) { }
        
            if (res.confirm) { }
          }
        })
      },
      fail: res => {
        debugger;
        wx.showModal({
          title: '登录失败',
          content: 'res.code = ' + res.errMsg,
          complete: (res) => {
            if (res.cancel) { }
        
            if (res.confirm) { }
          }
        })
      },
      complete: res => {
        debugger;
        wx.showModal({
          title: '登录操作完成',
          content: 'res.code = ' + res.errMsg,
          complete: (res) => {
            if (res.cancel) { }
        
            if (res.confirm) { }
          }
        })
      }
    })

调试要点总结:

1、需要打断点的代码行前,添加 debugger,

编译或保存时,都会促发模拟器重新运行,在调试器 sources 标签中打开代码断点位置,进入断点调试,此处代码可以点击左侧行号,新增或移除断点。

(代码编辑器无法与调试器同步,但调试器中呈现的代码文件与其用法无二。)

javascript 复制代码
    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        debugger;
        resThis = this;
        wx.showModal({
          title: '登录成功',
          content: 'res.code = ' + res.code,
          complete: (res) => {
            if (res.cancel) { }
        
            if (res.confirm) { }
          }
        })
        console.debug("res.code = " + res.code);
      },

2、使用 console.log/info/debug 等输出信息到控制台

调试器 console 下输出。

3、模态弹窗(wx.showModal)

javascript 复制代码
        wx.showModal({
          title: '登录成功',
          content: 'res.code = ' + res.code,
          complete: (res) => {
            if (res.cancel) { }
        
            if (res.confirm) { }
          }
        })

4、非模态弹窗(wx.showToast)

javascript 复制代码
              wx.showToast({
                title: '非模态弹窗提示',
              });

5、底部弹出菜单(wx.showActionSheet)

javascript 复制代码
              wx.showActionSheet({
                alertText: '底部弹出菜单',
                itemList: ['选项一', '选项二', '选项三', '选项四', '选项五'],
                itemColor: '#000000',
                success(res) {
                  wx.showToast({
                    title: '菜单序号' + res.tapIndex
                  })
                },
                fail(res) {
                  wx.showToast({
                    title: '菜单选择失败原因' + res.errMsg
                  })
                },
                complete(res) { }
              })

6、气泡通知(wx.showLoading)

javascript 复制代码
              wx.showLoading({
                title: '加载中提示。。。',
              })
              setTimeout(function () {
                wx.hideLoading()
              }, 2000)
相关推荐
三翼鸟数字化技术团队10 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
腥臭腐朽的日子熠熠生辉19 分钟前
解决maven失效问题(现象:maven中只有jdk的工具包,没有springboot的包)
java·spring boot·maven
ejinxian21 分钟前
Spring AI Alibaba 快速开发生成式 Java AI 应用
java·人工智能·spring
杉之26 分钟前
SpringBlade 数据库字段的自动填充
java·笔记·学习·spring·tomcat
Jasmin Tin Wei39 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
俏布斯1 小时前
算法日常记录
java·算法·leetcode
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js