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)
相关推荐
拾光拾趣录2 分钟前
CSS 深入解析:提升网页样式技巧与常见问题解决方案
前端·css
莫空00003 分钟前
深入理解JavaScript属性描述符:从数据属性到存取器属性
前端·面试
guojl3 分钟前
深度剖析Kafka读写机制
前端
guojl4 分钟前
深度解读jdk8 HashMap设计与源码
java
FogLetter4 分钟前
图片懒加载:让网页飞起来的魔法技巧 ✨
前端·javascript·css
Mxuan5 分钟前
vscode webview 插件开发(精装篇)
前端
Mxuan6 分钟前
vscode webview 插件开发(交付篇)
前端
Mxuan7 分钟前
vscode 插件与 electron 应用跳转网页进行登录的实践
前端
拾光拾趣录7 分钟前
JavaScript 加载对浏览器渲染的影响
前端·javascript·浏览器
Codebee7 分钟前
OneCode图表配置速查手册
大数据·前端·数据可视化