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)
相关推荐
新生农民42 分钟前
30分钟解决8道算法题
java·数据结构·算法
编程猪猪侠1 小时前
解决yarn install 报错 error \node_modules\electron: Command failed.
前端·javascript·electron
sinat_262292112 小时前
Java面试实战:音视频场景下的微服务架构与缓存技术剖析
java·spring boot·redis·微服务·kafka·分布式系统·面试技巧
mask哥2 小时前
详解springcloudalibaba采用prometheus+grafana实现服务监控
java·nacos·springboot·grafana·prometheus·springcloud·微服务监控
振鹏Dong2 小时前
Java基础&集合 面试经典八股总结 [连载ing]
java
不当菜虚困6 小时前
JAVA设计模式——(二)组合模式
java·设计模式·组合模式
来自星星的坤6 小时前
Vue 3中如何封装API请求:提升开发效率的最佳实践
前端·javascript·vue.js
jack_xu7 小时前
经典大厂面试题——缓存穿透、缓存击穿、缓存雪崩
java·redis·后端
vvilkim8 小时前
全面解析React内存泄漏:原因、解决方案与最佳实践
前端·javascript·react.js
vvilkim8 小时前
React批处理(Batching)更新机制深度解析
前端·javascript·react.js