微信小程式開發系列教程
微信小程式開發系列一：微信小程式的申請和開發環境的搭建
微信小程式開發系列二：微信小程式的視圖設計
這個教程的前兩篇文章，介紹了如何用下圖所示的微信開發者工具自動生成一個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标簽頁能顯示目前渲染好的視圖的明細：
大家熟悉了微信小程式的調試器，就能開始下一章節關于微信小程式控制器的學習了。