WeChat_DevTools 断点调试方法总结

太阳火神的美丽人生2024-10-01 13:16

新建工程，以小程序 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)