平時開發小程序可以在開發者工具中進行調試，開發者工具提供了類似 Chrome DevTools 的調試面板，對于前端開發者來說入門門檻比較低。
小程序開發完成之后，我們需要在真機上進行測試，真機調試方面小程序開發者工具有預覽、遠程調試和設置體驗版本三大部分功能。除了這三種方式之外，我們還可以使用真機遠程調試，在 iOS 上可以通過實現 Safari 調試代碼，安卓中可以安裝 X5 內核的 inspect 版本，開啟 Chrome remote debug 模式。使用真機調試不僅可以發現開發者工具中不能發現的 bug，還能幫助我們理解小程序的運行原理。
下面介紹下如何使用 Xcode、Reveal 和 Safari 來真機調試 iOS 上的小程序。
先大概說下原理，首先下載砸過殼版本的微信 ipa 文件（iOS App 程序的后綴），然后使用 IPAPatch 對 ipa 進行重新簽名，簽名賬號可以使用自己的 Apple 賬號，最后將項目編譯到真機（也可以模擬器），就可以使用 Safari 進行調試了。
按照上面的提示，首先修改 BundleID（這里的填寫可以比較隨意），然后使用自己的 Apple ID 登錄賬號，再選擇自己的真機（數據線連接后可以選擇），選擇后點擊開始編譯，編譯結束會安裝到自己的 iPhone 手機，安裝成功后就會發現自己的手機有兩個微信了。
接著再完成下面的步驟，就可以調試小程序了。
首先登錄微信賬號，打開需要調試的小程序，打開后在 Mac 電腦上打開「Safari -> 開發」找到自己的 iPhone 手機，選擇對應的頁面就可以進行調試了。
這里說明下：
調試 JSContext
打開 JSContext 之后，找到的第一個 JS 文件實際就是微信的邏輯層代碼執行 waservice.js 了：
另外看到一些 JSBridge.subscribeHandle 的代碼實際是 Native 實現的一些方法或事件，然后調用 JSContext 中的方法回傳數據的。下面是點擊事件的一個截圖，會看到點擊事件傳遞的數據。
調試 page-frame.html
page-frame 的頁面是普通的 WebView 容器，可以在 Safari 中直接 debug，下面我打開了自己正在開發的項目，通過 Console 面板修改 #canvas-wrapper 節點的內容：
修改后，在手機上看到效果：
這說明實際 WebView 內是可以進行 DOM 操作的，而且也可以使用普通的 BOM 對象，如 alert、location等。
使用 Reveal 查看 UI 布局
如果要研究微信小程序的布局，可以使用 Reveal 軟件來查看 UI 布局。如下圖所示，在今日頭條的小程序布局中，可以看到播放器組件是 Native 實現的組件，而我們做的新鮮天氣小程序的雨雪效果 Canvas 也是 Native 實現的。
要開啟 Reveal，需要經過下面的步驟：
上面兩個步驟如果都正確，再次用 Xcode 打開 IPAPatch 編譯運行，打開小程序后，會在 Reveal 中看到可以操作了。
這時候點擊 icon 就可以隨意查看 UI 布局了。
廣告時間
最近由于小程序·云開發的推出，我發現使用云開發，可以大大降低小程序的開發門檻，以前很多靈光乍現的點子，往往因為缺乏后端知識或者缺少后端服務器沒有得到實現，現在使用小程序云開發提供的接口完全可以實現。
于是我自己用云開發的 API 實現了一個「新鮮天氣」的小程序，并將我在開發中的過程以及比較好的經驗，整理成了一本電子書，放在了騰訊云學院上《從0到1實現天氣查詢小程序》。
這份實戰課程以打造一款擁有天氣預報和簽到功能的小程序為主線，從基礎知識到小程序運行機制，從開發環境搭建到小程序開發、調試、上線，打通微信小程序開發全流程，讓新手可以從零開始完成并上線一個小程序。主要有以下三部分組成：
當然，這份實戰課程收取一部分費用，不過價格比較便宜，希望能夠對想學習或者正在進行小程序開發的你有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
