微信小程序的調試方法是什么

今天就跟大家聊聊有關微信小程序的調試方法是什么，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

控制器index.js 僅僅采取靜態的代碼走查還不夠，我們需要將微信小程序啟動起來，通過單步調試的方式逐行講解，通過控制器的調用上下文能對微信小程序的控制器實現有更深入的了解。

為此我們先要學會微信小程序的調試方法。

打開微信開發者工具，點擊工具欄的“調試器”按鈕：

開發者工具右邊的區域現在從上到下一分為二：上面藍色區域還是代碼編輯頁面，下面紅色區域就是微信小程序的調試工具。

做過前端開發的朋友們，可以一眼就看出這其實就是Chrome的開發者工具。

我在我的微信公眾號“汪子熙”上也寫過一篇Chrome開發者工具的使用技巧介紹，感興趣的朋友可以去看看：

鏈接如下： https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484306&idx=1&sn=314d749da91a94064ef1e258657a0974&chksm=ead5b105dda23813addbca28689e3fcc22c0b47cb2d4f49557ec796edfa8fe88c43d2c70567a#rd

在調試器里打開我們的控制器index.js, 單擊行號"3", 然后行號3自動被高亮，說明第3行已經成功設置好了一個斷點。

點擊“編譯”按鈕，我們的小程序自動啟動，設置在控制器里的斷點就自動觸發了。這樣我們就可以通過單步調試的方式來學習微信小程序控制器的調用上下文了。

微信小程序的調試器在手機上仍然可以打開。在手機上訪問微信小程序，點擊屏幕右下角的vConsole按鈕。

接著整個手機屏幕就被微信小程序的調試器充滿了。這個調試器和電腦上安裝的微信開發者工具相比，僅僅能顯示日志和執行一些簡單的JavaScript操作，但是不能像電腦上那樣，進行JavaScript代碼的調試。

我們注意到上圖的“command...”輸入框可以輸入一些簡單的JavaScript命令，比如console.log("Jerry")。

然后可以在手機的調試器上看到輸出的Jerry：

System標簽頁可以看到一些微信小程序性能相關的參數和性能參數：

MicroMessenger版本號：6.6.6

Wechat lib: 庫文件版本2.0.9

navigation: 3ms 跳轉時間3毫秒

domComplete(domLoaded): dom加載總共花費19毫秒

WXML標簽頁能顯示當前渲染好的視圖的明細：

大家熟悉了微信小程序的調試器，就能開始下一章節關于微信小程序控制器的學習了。

看完上述內容，你們對微信小程序的調試方法是什么有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。