1. 程式人生 > >微信小程序真機定位問題技巧

微信小程序真機定位問題技巧

日誌信息 title html log cdp 按鈕 evel 操作 dsr

小程序導航 https://wq.xmaht.top

開發者在開發小程序的時候可能會碰到一些這樣的問題:

問題1 開發者工具上看效果沒問題,但是在真機上測試不行?

問題2 有用戶遇到小程序功能無法使用的問題,但無法快速定位解決?

今天與大家分享一些真機定位的技巧,可以解決上面兩個問題。

1、vConsole開發利器和遠程調試功能

針對問題1,我們提供了 vConsole 開發利器和遠程調試功能,可以協助開發者在定位真機上的問題。

vConsole 的有四個Tab面板,可以先看下 Log 面板,看是否有異常信息,異常類型 thirdScriptError 是框架捕捉到的開發者的代碼執行的異常,可以優先處理異常信息看是否可以解決問題。Log 面板可以看到異常出現的文件和行數。

技術分享圖片

除了異常日誌,開發者還可以通過 console.log接口在一些關鍵執行路徑上打日誌來定位問題,這些日誌會呈現在 Log 面板上。

vConsole 默認是不開啟的,可以通過下面2個方法來開啟:

1 開發版和體驗版可以點擊小程序頁面右上角的...按鈕打開的菜單項“打開調試”來開啟 vConsole。

2 正式版沒有“打開調試”的菜單項,可以先通過開發版和體驗版來開啟 vConsole,然後再打開正式版。或者可以預埋一個隱藏操作,比如連續點擊某個 Button 多次,然後調用 API 接口 wx.setEnableDebug來打開。

vConsole 雖然強大,但在手機上查看大量的日誌信息不方便,此外,vConsole 沒有斷點調試、無法修改樣式,定位復雜問題需要花費比較多的時間。

小程序的業務邏輯運行在 AppService 層,頁面渲染在 WebView 運行,並通過微信客戶端通信,因此,我們想到了可以讓 AppService 運行在開發者工具,頁面渲染還是在手機 WebView,兩者通過網絡來通信,這樣借助開發者工具的調試能力,就可以實現遠程調試功能

遠程調試窗口通過手機客戶端掃描開發者工具上生成的二維碼來打開,無需像普通手機 H5 頁面調試一樣,需要在手機端進行一些設置。

技術分享圖片

打開的遠程調試界面和開發者工具的模擬器的調試界面很像,需要註意的是,要在 Console 裏對小程序進行調試,需要將調試的上下文切換到 VM Context 1 。

技術分享圖片

更多的遠程調試的使用方法請參考使用文檔。

2、意見反饋能力

對於問題2,小程序的使用反饋來自用戶投訴,這種情況用戶無法聯系到開發者。我們遇見過有小程序功能出現問題,用戶無法使用,但投訴無門的情況,而這些問題,開發者也沒有途徑去收集以及處理,這就導致了小程序服務質量下降,用戶流失。

為此,我們開發了“意見反饋”功能,當出現問題時,開發者可以引導用戶使用“意見反饋”進行反饋,並上傳日誌來輔助開發者定位問題。操作過程如下:

引導用戶進入小程序帳號詳情頁面,具體可以在小程序界面點擊右上角...按鈕,選擇關於菜單。接著在帳號詳情頁面點擊右上角...按鈕,選擇意見反饋菜單進入頁面。頁面可以上傳圖片和日誌,建議用戶上傳異常情況的截圖,以及勾選允許開發者使用小程序日誌選項上傳日誌,反饋信息越詳細,越有助於定位問題。

技術分享圖片
技術分享圖片

如果覺得上面的操作步驟太麻煩,開發者可以通過在頁面 WXML 添加下面的按鈕,用戶點擊按鈕可以直接打開“意見反饋”頁面。

技術分享圖片

開發者需要定時處理用戶的反饋,這樣才能保證小程序的質量。開發者可以登錄小程序管理後臺,進入左側菜單客服反饋,就可以看到用戶的反饋內容以及下載日誌來輔助定位問題。

技術分享圖片

為了保證日誌信息足夠詳細,開發者需要用下面的接口在代碼的關鍵執行路徑上寫日誌。

技術分享圖片

wx.getLogManager 接口的更詳細使用請參考文檔。

希望通過這些小技巧,可以幫助大家順暢地開發小程序。

微信小程序真機定位問題技巧