平時(shí)開(kāi)發(fā)小程序可以在開(kāi)發(fā)者工具中進(jìn)行調(diào)試，開(kāi)發(fā)者工具提供了類(lèi)似 Chrome DevTools 的調(diào)試面板，對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)入門(mén)門(mén)檻比較低。

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

下面介紹下如何使用 Xcode、Reveal 和 Safari 來(lái)真機(jī)調(diào)試 iOS 上的小程序。

先大概說(shuō)下原理，首先下載砸過(guò)殼版本的微信 ipa 文件（iOS App 程序的后綴），然后使用 IPAPatch 對(duì) ipa 進(jìn)行重新簽名，簽名賬號(hào)可以使用自己的 Apple 賬號(hào)，最后將項(xiàng)目編譯到真機(jī)（也可以模擬器），就可以使用 Safari 進(jìn)行調(diào)試了。

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

按照上面的提示，首先修改 BundleID（這里的填寫(xiě)可以比較隨意），然后使用自己的 Apple ID 登錄賬號(hào)，再選擇自己的真機(jī)（數(shù)據(jù)線連接后可以選擇），選擇后點(diǎn)擊開(kāi)始編譯，編譯結(jié)束會(huì)安裝到自己的 iPhone 手機(jī)，安裝成功后就會(huì)發(fā)現(xiàn)自己的手機(jī)有兩個(gè)微信了。

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

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

首先登錄微信賬號(hào)，打開(kāi)需要調(diào)試的小程序，打開(kāi)后在 Mac 電腦上打開(kāi)「Safari -> 開(kāi)發(fā)」找到自己的 iPhone 手機(jī)，選擇對(duì)應(yīng)的頁(yè)面就可以進(jìn)行調(diào)試了。

這里說(shuō)明下：

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

調(diào)試 JSContext

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

另外看到一些 JSBridge.subscribeHandle 的代碼實(shí)際是 Native 實(shí)現(xiàn)的一些方法或事件，然后調(diào)用 JSContext 中的方法回傳數(shù)據(jù)的。下面是點(diǎn)擊事件的一個(gè)截圖，會(huì)看到點(diǎn)擊事件傳遞的數(shù)據(jù)。

調(diào)試 page-frame.html

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

修改后，在手機(jī)上看到效果：

這說(shuō)明實(shí)際 WebView 內(nèi)是可以進(jìn)行 DOM 操作的，而且也可以使用普通的 BOM 對(duì)象，如 alert、location等。

使用 Reveal 查看 UI 布局

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

要開(kāi)啟 Reveal，需要經(jīng)過(guò)下面的步驟：

1. 安裝 Reveal，然后通過(guò)菜單「Help -> Show Reveal Library in Finder -> iOS Library」，打開(kāi) RevealServer.framework 所在目錄
2. 將 RevealServer.framework 復(fù)制到 IPAPatch 的 Assets/Frameworks/ 內(nèi)

上面兩個(gè)步驟如果都正確，再次用 Xcode 打開(kāi) IPAPatch 編譯運(yùn)行，打開(kāi)小程序后，會(huì)在 Reveal 中看到可以操作了。

這時(shí)候點(diǎn)擊 icon 就可以隨意查看 UI 布局了。

廣告時(shí)間

最近由于小程序·云開(kāi)發(fā)的推出，我發(fā)現(xiàn)使用云開(kāi)發(fā)，可以大大降低小程序的開(kāi)發(fā)門(mén)檻，以前很多靈光乍現(xiàn)的點(diǎn)子，往往因?yàn)槿狈蠖酥R(shí)或者缺少后端服務(wù)器沒(méi)有得到實(shí)現(xiàn)，現(xiàn)在使用小程序云開(kāi)發(fā)提供的接口完全可以實(shí)現(xiàn)。

于是我自己用云開(kāi)發(fā)的 API 實(shí)現(xiàn)了一個(gè)「新鮮天氣」的小程序，并將我在開(kāi)發(fā)中的過(guò)程以及比較好的經(jīng)驗(yàn)，整理成了一本電子書(shū)，放在了騰訊云學(xué)院上《從0到1實(shí)現(xiàn)天氣查詢小程序》。

這份實(shí)戰(zhàn)課程以打造一款擁有天氣預(yù)報(bào)和簽到功能的小程序?yàn)橹骶€，從基礎(chǔ)知識(shí)到小程序運(yùn)行機(jī)制，從開(kāi)發(fā)環(huán)境搭建到小程序開(kāi)發(fā)、調(diào)試、上線，打通微信小程序開(kāi)發(fā)全流程，讓新手可以從零開(kāi)始完成并上線一個(gè)小程序。主要有以下三部分組成：

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

當(dāng)然，這份實(shí)戰(zhàn)課程收取一部分費(fèi)用，不過(guò)價(jià)格比較便宜，希望能夠?qū)ο雽W(xué)習(xí)或者正在進(jìn)行小程序開(kāi)發(fā)的你有所幫助。