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)
相关推荐
gnip4 小时前
企业级配置式表单组件封装
前端·javascript·vue.js
一只叫煤球的猫5 小时前
写代码很6,面试秒变菜鸟?不卖课,面试官视角走心探讨
前端·后端·面试
excel6 小时前
Three.js 材质(Material)详解 —— 区别、原理、场景与示例
前端
掘金安东尼6 小时前
抛弃自定义模态框:原生Dialog的实力
前端·javascript·github
皮皮林5517 小时前
IDEA 源码阅读利器,你居然还不会?
java·intellij idea
hj5914_前端新手10 小时前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法10 小时前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku10 小时前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode10 小时前
iOS 苹果内购 Storekit 2
前端
LuckySusu10 小时前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript