在开发javaweb应用的时候，如果遇见一个问题都会调试，debug，在火狐和谷歌浏览器的时候我们也可以使用断点的方式调试js，小程序可以吗？肯定是可以的！小程序的调试也可以在手机端进行远程调试。源码：https://github.com/limingios/wxProgram.git 中的No.4

开始演示

登录微信小程序，获取appId，远程调试必须有AppID

新建项目
记住这个必须填入AppID

了解功能按键
>预览：手机可以通过扫描二维码的方式在手机上直接观看小程序
>远程调试：可以在手机上进行操作，并且可以在电脑上弹出对应的控制台，来观察操作的效果，同时在手机和电脑上进行调试。

修改初始化代码
>源码：https://github.com/limingios/wxProgram.git 中的No.4

app.js

//app.jsApp({  onLaunch: function (options) {    console.log("onLaunch")  },  onShow: function (options) {    console.log("onShow")  },  onHide: function () {    console.log("onHide")  },  onError: function (msg) {    console.log("onError")  },  globalData: 'I am global data'})

app.json

{  "pages":[    "pages/index/index"  ],  "window":{    "backgroundTextStyle":"light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle":"black"  }}

index.wxml

<!--index.wxml--><view class="container"> {{motto}}</view>

index.js

//index.js//获取应用实例const app = getApp()Page({  data: {    motto: 'Hello World',    userInfo: {},    hasUserInfo: false,    canIUse: wx.canIUse('button.open-type.getUserInfo')  },  onLoad: function () {      this.setData({        motto: app.globalData      })    }})

打断点，源码中加入debugger

app.js

//app.jsApp({  onLaunch: function (options) {    debugger    console.log("onLaunch")  },  onShow: function (options) {    debugger    console.log("onShow")  },  onHide: function () {    debugger    console.log("onHide")  },  onError: function (msg) {    debugger    console.log("onError")  },  globalData: 'I am global data'})

编辑工具下的调试
> 开启调试器，可以通过f10单步进行调试

安装itools手机可以实时看到手机上的
>扫描预览的效果

打开手机的调试

重新进入小程序

点击vConsole

这里出发了onHide，上次在工具开发预览的时候并没有触发。.

开启远程调试
>点击开启远程调试，也会生成一个二维码

手机扫一扫，


出现命中断点和远程调试窗口


可以看到类似web调试的一些工具

可以查看远端代码

PS：最后想到了什么老铁，可以查看远端的代码是不是就可以获取到借鉴他的代码了。其实微信早就想到了，不是所有的都可以的。远端调试必须知道他的APPID的，不是说直接看就可以了。

>>原创文章，欢迎转载。转载请注明：转载自IT人故事会，谢谢！
>>原文链接地址：「小程序JAVA实战」 小程序远程调试（九）