微信小程序debug

原文鏈接:https://blog.csdn.net/bright789/article/details/54709594

在微信小程序開始學習與開發的過程中,總有一些東西,想看看它跑起來的內容與我們編程時想的是否一致,於是就想到了能不能單步調試或者打出一些我們想要的變量的內容,以便我們做進一步的開發和調整,現在我就要介紹下微信小程序的一般用到的調試方法和打印日誌以及看到變量裏面的運行值。

第一步:打斷點,我們必須在我們想要它停下來的地方打上調試斷點,點擊微信開發者工具的左側的“調試”tab,然後選擇中間窗口中的”Sources”Tab,在Sources頁中點開”Top”根節點,層層打開,找到自己想要調試的js文件,一般是打那種.js後面帶[sm],如index.js[sm],非index.js,當然這裏之後想修改內容不能在”調試”模式下修改,而要轉到”編輯”模式,之前我老容易犯這個錯誤,打開index.js[sm]文件後,點擊左邊的行上的數字,就會由灰色背景變成藍色背景,這樣斷點就打好了,(如果不想要了,也可以點擊就會取消)如下圖所示:

第二步:運行,首先點擊編譯上面的那個運行小圖標(或者快捷鍵ctrl+b),然後操作到你想要的那個界面或者觸發某個動作,程序自動會跑到斷點處代碼,如下圖所示:

第三步:單步調試,按調試器窗口(debugger)的向下箭頭(step into nextfunction call),一步步的可以往下調試,如果想跳到下一個斷點,就按調試器窗口的類似於播放的小按鈕,英文叫resume script execution,快捷鍵爲F8或者Ctrl+\,如下圖所示

如果想看調試中變量的運行值怎麼辦?有許多辦法,這裏以查看上個界面傳來的options變量值爲例

辦法1:讓鼠標指針放在變量上,他會有提示框,框內就是變量值,如下圖所示

辦法2:使用console.log(options);打印出來,在console窗口可以查看,如下圖所示

方法3:在調試器窗口,點開Scope標籤,然後再點開相應變量,如下圖所示

如果我們的斷點過多或者不想它們調試了,怎麼讓它們失效呢?

辦法就是點擊調試器窗口中的圖標,英文叫deactive breakpoints(或者快捷鍵:Ctrl+F8)
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章