在開發(fā)javaweb應(yīng)用的時候，如果遇見一個問題都會調(diào)試，debug，在火狐和谷歌瀏覽器的時候我們也可以使用斷點的方式調(diào)試js，小程序可以嗎？肯定是可以的！小程序的調(diào)試也可以在手機端進行遠(yuǎn)程調(diào)試。源碼：https://github.com/limingios/wxProgram.git 中的No.4

海港網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)建站！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)建站從2013年成立到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)建站。

開始演示

1. 登錄微信小程序，獲取appId，遠(yuǎn)程調(diào)試必須有AppID

1. 新建項目
   記住這個必須填入AppID

1. 了解功能按鍵
   >預(yù)覽：手機可以通過掃描二維碼的方式在手機上直接觀看小程序
   >遠(yuǎn)程調(diào)試：可以在手機上進行操作，并且可以在電腦上彈出對應(yīng)的控制臺，來觀察操作的效果，同時在手機和電腦上進行調(diào)試。

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

• app.js

//app.js
App({
??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

?{{motto}}

• index.js

//index.js
//獲取應(yīng)用實例
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
??????})
????}
})

1. 打斷點，源碼中加入debugger

• app.js

//app.js
App({
??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'
})

1. 編輯工具下的調(diào)試
   > 開啟調(diào)試器，可以通過f10單步進行調(diào)試

1. 安裝itools手機可以實時看到手機上的
   >掃描預(yù)覽的效果

1. 打開手機的調(diào)試

• 重新進入小程序

點擊vConsole

這里出發(fā)了onHide，上次在工具開發(fā)預(yù)覽的時候并沒有觸發(fā)。.

1. 開啟遠(yuǎn)程調(diào)試
   >點擊開啟遠(yuǎn)程調(diào)試，也會生成一個二維碼

• 手機掃一掃，
  

• 出現(xiàn)命中斷點和遠(yuǎn)程調(diào)試窗口

• 可以看到類似web調(diào)試的一些工具

• 可以查看遠(yuǎn)端代碼

PS：最后想到了什么老鐵，可以查看遠(yuǎn)端的代碼是不是就可以獲取到借鑒他的代碼了。其實微信早就想到了，不是所有的都可以的。遠(yuǎn)端調(diào)試必須知道他的APPID的，不是說直接看就可以了。

>>原創(chuàng)文章，歡迎轉(zhuǎn)載。轉(zhuǎn)載請注明：轉(zhuǎn)載自IT人故事會，謝謝！
>>原文鏈接地址：「小程序JAVA實戰(zhàn)」 小程序遠(yuǎn)程調(diào)試（九）