平時開發(fā)小程序可以在開發(fā)者工具中進行調試，開發(fā)者工具提供了類似 Chrome DevTools 的調試面板，對于前端開發(fā)者來說入門門檻比較低。

小程序開發(fā)完成之后，我們需要在真機上進行測試，真機調試方面小程序開發(fā)者工具有預覽、遠程調試和設置體驗版本三大部分功能。除了這三種方式之外，我們還可以使用真機遠程調試，在 iOS 上可以通過實現 Safari 調試代碼，安卓中可以安裝 X5 內核的 inspect 版本，開啟 Chrome remote debug 模式。使用真機調試不僅可以發(fā)現開發(fā)者工具中不能發(fā)現的 bug，還能幫助我們理解小程序的運行原理。

下面介紹下如何使用 Xcode、Reveal 和 Safari 來真機調試 iOS 上的小程序。

先大概說下原理，首先下載砸過殼版本的微信 ipa 文件（iOS App 程序的后綴），然后使用 IPAPatch 對 ipa 進行重新簽名，簽名賬號可以使用自己的 Apple 賬號，最后將項目編譯到真機（也可以模擬器），就可以使用 Safari 進行調試了。

1. 下載 IPAPatch 項目
2. 使用 PP 助手下載砸過殼版本的微信 ipa（使用最新版本的微信，否則登錄會提示需要升級），這個需要安裝 PP 助手，下載后在下載目錄找到其 ipa
3. 將微信的 ipa 文件命名為 app.ipa，替換掉 IPAPatch 目錄的 Assets/app.ipa 文件
4. 使用 Xcode 打開 IPAPatch 項目
5. 修改簽名到自己的開發(fā)者賬號，沒有開發(fā)者賬號可以用自己的 Apple 賬號登錄

按照上面的提示，首先修改 BundleID（這里的填寫可以比較隨意），然后使用自己的 Apple ID 登錄賬號，再選擇自己的真機（數據線連接后可以選擇），選擇后點擊開始編譯，編譯結束會安裝到自己的 iPhone 手機，安裝成功后就會發(fā)現自己的手機有兩個微信了。

接著再完成下面的步驟，就可以調試小程序了。

1. 在 iPhone 上信任自己的開發(fā)者描述文件：「設置 -> 通用 -> 描述文件 -> 信任你的證書」
2. 在 iPhone 上打開 Safari 調試功能：「設置 -> Safari -> 高級 -> Web 檢查器打開」

首先登錄微信賬號，打開需要調試的小程序，打開后在 Mac 電腦上打開「Safari -> 開發(fā)」找到自己的 iPhone 手機，選擇對應的頁面就可以進行調試了。

這里說明下：

• JSContext：是小程序的邏輯層代碼，執(zhí)行在 JavaScriptCore 環(huán)境中
• page-frame.html：是小程序的視圖層代碼，執(zhí)行在普通的 WKWebview 中
• 上圖只開了一個小程序頁面卻顯示了兩個 page-frame.html，說明始終有一個頁面在后臺加載，準備打開小程序的其他頁面

調試 JSContext

打開 JSContext 之后，找到的第一個 JS 文件實際就是微信的邏輯層代碼執(zhí)行 waservice.js 了：

另外看到一些 JSBridge.subscribeHandle 的代碼實際是 Native 實現的一些方法或事件，然后調用 JSContext 中的方法回傳數據的。下面是點擊事件的一個截圖，會看到點擊事件傳遞的數據。

調試 page-frame.html

page-frame 的頁面是普通的 WebView 容器，可以在 Safari 中直接 debug，下面我打開了自己正在開發(fā)的項目，通過 Console 面板修改 #canvas-wrapper 節(jié)點的內容：

修改后，在手機上看到效果：

這說明實際 WebView 內是可以進行 DOM 操作的，而且也可以使用普通的 BOM 對象，如 alert、location等。

使用 Reveal 查看 UI 布局

如果要研究微信小程序的布局，可以使用 Reveal 軟件來查看 UI 布局。如下圖所示，在今日頭條的小程序布局中，可以看到播放器組件是 Native 實現的組件，而我們做的新鮮天氣小程序的雨雪效果 Canvas 也是 Native 實現的。

要開啟 Reveal，需要經過下面的步驟：

1. 安裝 Reveal，然后通過菜單「Help -> Show Reveal Library in Finder -> iOS Library」，打開 RevealServer.framework 所在目錄
2. 將 RevealServer.framework 復制到 IPAPatch 的 Assets/Frameworks/ 內
   

上面兩個步驟如果都正確，再次用 Xcode 打開 IPAPatch 編譯運行，打開小程序后，會在 Reveal 中看到可以操作了。

這時候點擊 icon 就可以隨意查看 UI 布局了。

廣告時間

最近由于小程序·云開發(fā)的推出，我發(fā)現使用云開發(fā)，可以大大降低小程序的開發(fā)門檻，以前很多靈光乍現的點子，往往因為缺乏后端知識或者缺少后端服務器沒有得到實現，現在使用小程序云開發(fā)提供的接口完全可以實現。

于是我自己用云開發(fā)的 API 實現了一個「新鮮天氣」的小程序，并將我在開發(fā)中的過程以及比較好的經驗，整理成了一本電子書，放在了騰訊云學院上《從0到1實現天氣查詢小程序》。

這份實戰(zhàn)課程以打造一款擁有天氣預報和簽到功能的小程序為主線，從基礎知識到小程序運行機制，從開發(fā)環(huán)境搭建到小程序開發(fā)、調試、上線，打通微信小程序開發(fā)全流程，讓新手可以從零開始完成并上線一個小程序。主要有以下三部分組成：

• 小程序開發(fā)基礎知識：微信小程序、小程序云的開發(fā)基礎知識，最小程序的運行機制
• 實戰(zhàn)開發(fā)「新鮮天氣」小程序：小程序開發(fā)壞境搭建、新鮮天氣小程序簡介、天氣預報頁面布局開發(fā)，頁面數據交互
• 優(yōu)化到上線：從多個方面介紹小程序優(yōu)化的知識點，并且完成小程序的上線
  

當然，這份實戰(zhàn)課程收取一部分費用，不過價格比較便宜，希望能夠對想學習或者正在進行小程序開發(fā)的你有所幫助。

最新評論