微信小程序開發系列教程三：微信小程序的調試方法

微信小程序開發系列教程

微信小程序開發系列一：微信小程序的申請和開發環境的搭建

微信小程序開發系列二：微信小程序的視圖設計

這個教程的前兩篇文章，介紹瞭如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程序，並講解了這個自動生成的微信小程序的視圖開發原理。

這個系列的下一步，會繼續介紹這個微信小程序的控制器index.js的實現。在上一篇微信小程序視圖源代碼的講解裏，咱們經過逐行講解代碼的方式，介紹了微信小程序視圖的基本開發思路。可是講控制器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標籤頁能顯示當前渲染好的視圖的明細：

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

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: