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