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)
相关推荐
学不会•1 小时前
css数据不固定情况下,循环加不同背景颜色
前端·javascript·html
Theodore_10222 小时前
4 设计模式原则之接口隔离原则
java·开发语言·设计模式·java-ee·接口隔离原则·javaee
冰帝海岸3 小时前
01-spring security认证笔记
java·笔记·spring
活宝小娜3 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
世间万物皆对象3 小时前
Spring Boot核心概念:日志管理
java·spring boot·单元测试
程序视点3 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow3 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o3 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
没书读了4 小时前
ssm框架-spring-spring声明式事务
java·数据库·spring
小二·4 小时前
java基础面试题笔记(基础篇)
java·笔记·python