WeChat_DevTools 断点调试方法总结

新建工程，以小程序 login 调试为例，代码如下：

    // 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIddebugger;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 标签中打开代码断点位置，进入断点调试，此处代码可以点击左侧行号，新增或移除断点。

（代码编辑器无法与调试器同步，但调试器中呈现的代码文件与其用法无二。）

    // 登录wx.login({success: res => {// 发送 res.code 到后台换取 openId, sessionKey, unionIddebugger;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）

wx.showModal({title: '登录成功',content: 'res.code = ' + res.code,complete: (res) => {if (res.cancel) { }if (res.confirm) { }}})

4、非模态弹窗（wx.showToast）

wx.showToast({title: '非模态弹窗提示',});

5、底部弹出菜单（wx.showActionSheet）

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）

wx.showLoading({title: '加载中提示。。。',})setTimeout(function () {wx.hideLoading()}, 2000)