微信小程序工具 程序調(diào)試的三大主要功能區(qū)

程序調(diào)試主要有三大功能區(qū)：模擬器、調(diào)試工具和小程序操作區(qū)

模擬器

模擬器模擬微信小程序在客戶端真實(shí)的邏輯表現(xiàn)，對(duì)于絕大部分的 API 均能夠在模擬器上呈現(xiàn)出正確的狀態(tài)。

編譯代碼

點(diǎn)擊工具左下角的編譯按鈕或者使用快捷鍵 Ctrl(Command) + B，可以編譯當(dāng)前代碼，并自動(dòng)刷新模擬器。

同時(shí)為了幫助開發(fā)者調(diào)試具體頁(yè)面或者進(jìn)入的場(chǎng)景值，如同，開發(fā)者可以選擇自定義編譯模式。

自定義預(yù)處理

在項(xiàng)目設(shè)置頁(yè)卡，我們提供了以下幾個(gè)默認(rèn)的預(yù)處理，可以解決大部分的代碼文件預(yù)處理的問題

1. ES6 轉(zhuǎn) ES5（可以應(yīng)用于編譯、預(yù)覽、上傳），使用 "babel-core": "^6.26.0"
2. 上傳代碼時(shí)樣式自動(dòng)補(bǔ)全，使用 "postcss": "^6.0.1"
3. 上傳代碼時(shí)自動(dòng)壓縮，使用 "uglify-js": "3.0.27"

對(duì)于高級(jí)開發(fā)者來說，完全可以自己編寫自動(dòng)化構(gòu)建腳本對(duì)代碼文件進(jìn)行預(yù)處理，所以我們提供了 啟用自定義處理命令 選項(xiàng) 開發(fā)者可以指定 編譯前/預(yù)覽前/上傳前 需要預(yù)處理的命令 開發(fā)者工具使用 shell 的方式運(yùn)行指定的命令，并在控制臺(tái)中輸出命令的執(zhí)行日志

預(yù)處理命令的執(zhí)行順序

1. 自定義預(yù)處理命令
2. 默認(rèn)預(yù)處理命令
3. 編譯/預(yù)覽/上傳

注：

1. 編譯前預(yù)處理命令，需要手動(dòng)點(diǎn)擊 "編譯" 按鈕，或者使用快捷鍵編譯才能觸發(fā)。文件修改無(wú)法觸發(fā)該命令。
2. Mac 版本的開發(fā)者工具無(wú)法復(fù)用 bash 中的 Path 環(huán)境變量?？赡苄枰謩?dòng)設(shè)置系統(tǒng)的 Path 環(huán)境變量，才能正常執(zhí)行命令。

調(diào)試工具

調(diào)試工具分為 7 大功能模塊：Wxml、Console、Sources、Network、Appdata、Storage、Sensor

Wxml Panel

Wxml Panel 用于幫助開發(fā)者開發(fā) Wxml 轉(zhuǎn)化后的界面。在這里可以看到真實(shí)的頁(yè)面結(jié)構(gòu)以及結(jié)構(gòu)對(duì)應(yīng)的 wxss 屬性，同時(shí)可以通過修改對(duì)應(yīng) wxss 屬性，在模擬器中實(shí)時(shí)看到修改的情況。通過調(diào)試模塊左上角的選擇器，還可以快速找到頁(yè)面中組件對(duì)應(yīng)的 wxml 代碼。

Sources panel

Sources panel 用于顯示當(dāng)前項(xiàng)目的腳本文件，同瀏覽器開發(fā)不同，微信小程序框架會(huì)對(duì)腳本文件進(jìn)行編譯的工作，所以在 Sources panel 中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件，開發(fā)者的代碼都會(huì)被包裹在 define 函數(shù)中，并且對(duì)于 Page 代碼，在尾部會(huì)有 require 的主動(dòng)調(diào)用。

Network panel

Netwrok Pannle 用于觀察和顯示 request 和 socket 的請(qǐng)求情況

注：uploadFile 和 downloadFile 暫時(shí)不支持在 Network Panel 中查看

Appdata panel

Appdata panel 用于顯示當(dāng)前項(xiàng)目當(dāng)前時(shí)刻 appdata 具體數(shù)據(jù)，實(shí)時(shí)地反饋項(xiàng)目數(shù)據(jù)情況，可以在此處編輯數(shù)據(jù)，并及時(shí)地反饋到界面上。

Storage panel

Storage panel 用于顯示當(dāng)前項(xiàng)目的使用 wx.setStorage 或者 wx.setStorageSync 后的數(shù)據(jù)存儲(chǔ)情況。

Console Pannel

Console Pannel 有兩大功能：

• 開發(fā)者可以在此輸入和調(diào)試代碼

  
  
  

• 小程序的錯(cuò)誤輸出，會(huì)顯示在此處

  
  

Sensor panel

Sensor panel 有兩大功能：

• 開發(fā)者可以在這里選擇模擬地理位置

  
  

• 開發(fā)可以在這里模擬移動(dòng)設(shè)備表現(xiàn)，用于調(diào)試重力感應(yīng) API

  
  

小程序操作區(qū)

小程序操作區(qū)幫助開發(fā)者模擬一些客戶端的環(huán)境操作。例如當(dāng)用戶從小程序中回到聊天窗口，會(huì)觸發(fā)一個(gè)小程序被設(shè)置為后臺(tái)的api。

當(dāng)小程序使用到多窗口的時(shí)候，可以在頂部操作區(qū)進(jìn)行頁(yè)面切換，需要注意的是這個(gè)操作只是為了方便開發(fā)者才存在的，在真實(shí)的微信客戶端中是不會(huì)有的。

自定義數(shù)據(jù)上報(bào)

開發(fā)者工具上可以編輯和調(diào)試自定義分析的數(shù)據(jù)上報(bào)功能，點(diǎn)擊菜單欄中的 “工具 - 自定義分析” 即可彈窗打開自定義分析：

在頁(yè)面中可以新建、查看或修改事件，在修改事件的頁(yè)面中編輯完畢后，點(diǎn)擊底部的保存并測(cè)試按鈕將保存當(dāng)前配置，同時(shí)工具將在調(diào)試器上提示收到最新配置，并展示配置信息，展示的內(nèi)容包括事件的 ID 和名稱，以及每個(gè)動(dòng)作的觸發(fā)條件和上報(bào)數(shù)據(jù)：

接著可以在模擬器中操作和觸發(fā)事件。在模擬器中刷新小程序也將獲取該測(cè)試配置，除非窗口被關(guān)閉。窗口關(guān)閉后模擬器不會(huì)再收到配置。當(dāng)事件被觸發(fā)上報(bào)時(shí)，工具上會(huì)展示上報(bào)信息，包括事件 ID、觸發(fā)頁(yè)面、觸發(fā)方式、觸發(fā)時(shí)動(dòng)作、以及上報(bào)的字段值和數(shù)據(jù)：

同時(shí)可以在窗口中點(diǎn)擊 “同步結(jié)果” 會(huì)同步顯示上報(bào)的數(shù)據(jù)：

關(guān)閉窗口后，配置將全部失效，模擬器不再收到配置并不再觸發(fā)上報(bào)（小程序中使用 wx.reportAnalytics API 進(jìn)行的數(shù)據(jù)上報(bào)仍會(huì)在工具中輸出）。 測(cè)試成功后，可到小程序后臺(tái)發(fā)布事件配置，即可正式生效收集所定義的事件數(shù)據(jù)。

自動(dòng)預(yù)覽

自動(dòng)預(yù)覽可以實(shí)現(xiàn)編寫小程序時(shí)快速預(yù)覽，免去了每次查看小程序效果時(shí)都要掃碼或者使用小程序開發(fā)助手的麻煩。只需按下快捷鍵，保持前臺(tái)運(yùn)行的微信即可自動(dòng)喚出或刷新小程序。

要使用自動(dòng)預(yù)覽功能，需要配合 6.6.7 及以上的微信客戶端版本。

要開始使用 “自動(dòng)預(yù)覽” 功能，可以在打開預(yù)覽二維碼的時(shí)候，點(diǎn)擊 “自動(dòng)預(yù)覽” 標(biāo)簽以切換到自動(dòng)預(yù)覽模式。切換到自動(dòng)預(yù)覽模式后，只需按下預(yù)覽快捷鍵，或者點(diǎn)擊浮窗上的 “編譯并預(yù)覽” 按鈕，即可觸發(fā)自動(dòng)預(yù)覽。此時(shí)工具會(huì)上傳代碼，保持前臺(tái)運(yùn)行的微信客戶端會(huì)自動(dòng)刷新當(dāng)前開發(fā)的小程序。

當(dāng)自動(dòng)預(yù)覽成功時(shí)，工具欄上的預(yù)覽圖標(biāo)會(huì)顯示為一個(gè)綠勾。如果預(yù)覽出錯(cuò)，則會(huì)顯示為一個(gè)紅色驚嘆號(hào)，可以點(diǎn)擊查看詳情。

注意，自動(dòng)預(yù)覽功能僅限與登陸開發(fā)者工具的同帳號(hào)微信使用。如需換回普通預(yù)覽模式，只需要點(diǎn)擊 “掃描二維碼預(yù)覽” 標(biāo)簽即可。

用戶可以在快捷鍵設(shè)置里自定義預(yù)覽快捷鍵。

特殊場(chǎng)景調(diào)試

小程序開發(fā)者工具是對(duì)微信客戶端的模擬，受限于桌面設(shè)備同移動(dòng)設(shè)備的差異，以及微信的一些特有數(shù)據(jù)，同時(shí)考慮到開發(fā)的便捷性，部分 API 在工具和微信中有所不同。

掃碼接口

同手機(jī)端直接調(diào)用攝像頭來掃碼不同，在 PC 或者 Mac 上調(diào)用攝像頭來掃碼完成調(diào)試是一個(gè)低效的行為，所以在開發(fā)工具上調(diào)用二維碼掃碼 API 后，開發(fā)者可以選擇一個(gè)本地的圖片來進(jìn)行后續(xù)的邏輯調(diào)試，而不是真正的啟用攝像頭來掃碼，流程有所不同，但是接口的輸入和輸出是一致的。

微信支付

最新版本的開發(fā)者工具已經(jīng)支持微信支付的調(diào)試，但是為了兼顧到安全，同手機(jī)上直接調(diào)用微信支付有所不同：

• 新綁定的開發(fā)者需要 24 小時(shí)后才有權(quán)限進(jìn)行微信支付的調(diào)試
• 開發(fā)者在工具上調(diào)用微信支付的 API 后，開發(fā)工具會(huì)出現(xiàn)一個(gè)二維碼，開發(fā)者必須使用當(dāng)前開發(fā)所使用的微信號(hào)掃碼后在手機(jī)上完成支付的流程
• 工具會(huì)同步移動(dòng)端微信支付的回包到工具中，開發(fā)者自行進(jìn)行后續(xù)的操作

使用的交互有所不同，但是接口的輸入輸出工具同客戶端是保持一致的。

啟動(dòng)使用自定義參數(shù)

在日常使用中，用戶可以通過掃碼、分享打開一個(gè)小程序，這時(shí)候會(huì)依據(jù)設(shè)置的啟動(dòng)頁(yè)面：path 跳轉(zhuǎn)到對(duì)應(yīng)的小程序頁(yè)面（不一定是首頁(yè)）并且可以攜帶參數(shù)：query。在開發(fā)者工具中，開發(fā)者同樣可以通過自定義編譯條件的方式來達(dá)到調(diào)試不同啟動(dòng)頁(yè)面和啟動(dòng)參數(shù)的目的。

例如下圖是選擇進(jìn)入頁(yè)面是 page/API/index，參數(shù) 是 name=can

進(jìn)入場(chǎng)景值

在微信客戶端中，用戶可能在各個(gè)場(chǎng)景下打開小程序 詳情 ，然而在開發(fā)者工具中是沒有真實(shí)的環(huán)境去模擬這些場(chǎng)景的。開發(fā)者可以通過條件編譯的方式來達(dá)到調(diào)試不同場(chǎng)景的目的。

普通的轉(zhuǎn)發(fā)

開發(fā)者工具上調(diào)用轉(zhuǎn)發(fā)是一個(gè)模擬的行為，并不會(huì)真實(shí)的轉(zhuǎn)發(fā)給用戶，開發(fā)可以通過這個(gè)模擬行為判斷是否正確的調(diào)用了轉(zhuǎn)發(fā) API。

帶 shareTicket 的轉(zhuǎn)發(fā)

帶 shareTicket 的轉(zhuǎn)發(fā)可以獲取到更多的轉(zhuǎn)發(fā)信息，例如群聊的名稱以及群的標(biāo)識(shí) openGId。在小程序開發(fā)者工具上，開發(fā)者可以通過以下方式來調(diào)試帶 shareTicket 的轉(zhuǎn)發(fā)。

調(diào)用 wx.showShareMenu 的參數(shù) withShareTicket 為 true 時(shí)，點(diǎn)擊模擬器右上角菜單后出現(xiàn)的轉(zhuǎn)發(fā)按鈕，會(huì)出現(xiàn)一個(gè)測(cè)試群列表，如圖：

開發(fā)者點(diǎn)擊選取任何一個(gè)群，可以通過接口的回包獲取到 shareTicket ，通過調(diào)用 wx.getShareInfo 可以獲取到相關(guān)轉(zhuǎn)發(fā)的信息

當(dāng)開發(fā)者需要調(diào)試從某一個(gè)群點(diǎn)開，并且?guī)в?nbsp;shareTicket 的場(chǎng)景時(shí)，可以使用自定義編譯中的 1044:群聊會(huì)話中的小程序消息卡片（帶 shareTicket） 同時(shí)可以選擇任一模擬測(cè)試群，如圖

預(yù)覽使用自定義編譯條件

同 啟動(dòng)使用自定義參數(shù) 相同，提交預(yù)覽時(shí)，開發(fā)者可以通過自定義預(yù)覽的方式來達(dá)到在移動(dòng)設(shè)備上調(diào)試不同啟動(dòng)頁(yè)面和啟動(dòng)參數(shù) 的目的。我們可以選擇已經(jīng)創(chuàng)建好的自定義編譯條件進(jìn)行預(yù)覽。

跳轉(zhuǎn)小程序調(diào)試支持

小程序跳轉(zhuǎn)開發(fā)調(diào)試可以分為兩個(gè)部分

調(diào)試小程序是否能夠正確的跳轉(zhuǎn)

出于小程序代碼的安全考慮，在工具上調(diào)用 wx.navigateToMiniProgram 的時(shí)候，開發(fā)者工具不會(huì)真實(shí)的打開和跳轉(zhuǎn)到另外的小程序，但是工具會(huì)判斷當(dāng)前小程序與需要跳轉(zhuǎn)的小程序之間的綁定關(guān)系，輸出相關(guān)信息給到開發(fā)者。開發(fā)者可以根據(jù)成功或者失敗的回調(diào)函數(shù)來判斷調(diào)用是否成功。

調(diào)試被打開的小程序時(shí)候正確的接收參數(shù)

選擇 自定義編譯 進(jìn)入場(chǎng)景選擇 1037 從小程序進(jìn)入 可以調(diào)試小程序被打開時(shí)候是否接收到了正確的參數(shù)并做了相關(guān)處理。

選擇 自定義編譯 進(jìn)入場(chǎng)景選擇 1038 從小程序返回 可以調(diào)試小程序返回時(shí)候是否接收到了正確的參數(shù)并做了相關(guān)處理。

真機(jī)調(diào)試

真機(jī)遠(yuǎn)程調(diào)試功能可以實(shí)現(xiàn)直接利用開發(fā)者工具，通過網(wǎng)絡(luò)連接，對(duì)手機(jī)上運(yùn)行的小程序進(jìn)行調(diào)試，幫助開發(fā)者更好的定位和查找在手機(jī)上出現(xiàn)的問題。

調(diào)試流程

要發(fā)起一個(gè)真機(jī)遠(yuǎn)程調(diào)試流程，需要先點(diǎn)擊開發(fā)者工具的工具欄上 “遠(yuǎn)程調(diào)試” 按鈕。

此時(shí)，工具會(huì)將本地代碼進(jìn)行處理打包并上傳，就緒之后，使用手機(jī)客戶端掃描二維碼即可彈出調(diào)試窗口，開始遠(yuǎn)程調(diào)試。

遠(yuǎn)程調(diào)試窗口

使用手機(jī)掃描此二維碼，即可開始遠(yuǎn)程調(diào)試。

要結(jié)束調(diào)試，直接關(guān)閉此調(diào)試窗口，或點(diǎn)擊右下角 “結(jié)束調(diào)試” 按鈕即可。

遠(yuǎn)程調(diào)試窗口分為兩部分，分別是左側(cè)的調(diào)試器視圖、右側(cè)的信息視圖。開發(fā)者可以在調(diào)試器里直接進(jìn)行代碼的調(diào)試，并查看 Storage 情況；信息視圖則可以查看目前與手機(jī)和服務(wù)器的連接情況，以及發(fā)生的錯(cuò)誤信息等。

調(diào)試器

在遠(yuǎn)程調(diào)試的調(diào)試器里，開發(fā)者可以在 Console 面板里對(duì)代碼進(jìn)行調(diào)試，在 Sources 面板里查看小程序的源代碼并進(jìn)行斷點(diǎn)單步調(diào)試，在 Storage 面板里查看小程序的 Storage 使用情況等。

注意，要在 Console 里對(duì)小程序進(jìn)行調(diào)試，需要將調(diào)試的上下文切換到 VM Context 1，如圖所示。

在 Sources 面板查看源代碼時(shí)，開發(fā)者所有的文件路徑都是以 weapp:// 開頭的。

除了可以在調(diào)試器進(jìn)行單步調(diào)試，開發(fā)者還能在代碼中手動(dòng)插入 debugger; 語(yǔ)句進(jìn)行斷點(diǎn)調(diào)試。因此，如果想要在小程序啟動(dòng)的盡早時(shí)刻斷點(diǎn)，可以在進(jìn)入遠(yuǎn)程調(diào)試之前，編輯代碼手動(dòng)在需要斷點(diǎn)處的代碼插入 debugger; 語(yǔ)句來實(shí)現(xiàn)。

WXML、AppData、Storage 面板的操作和開發(fā)者工具調(diào)試模擬器時(shí)的操作一致。注意，如果在右側(cè)信息視圖取消勾選了 “使用工具端的 Storage”，則所有的 Storage 數(shù)據(jù)將被存儲(chǔ)在手機(jī)上，將不再出現(xiàn) Storage 面板。

信息視圖

右側(cè)的信息視圖展示了手機(jī)、網(wǎng)絡(luò)連接的信息。手機(jī)信息展示手機(jī)的型號(hào)、系統(tǒng)、名稱、微信版本等信息，以及通信延時(shí)。通信延時(shí)越小，與手機(jī)的通信越流暢。

在 “連接信息” 里，展示了工具與服務(wù)器的連接信息，包括了連接狀態(tài)、服務(wù)器狀態(tài)等，當(dāng)連接故障、服務(wù)器阻塞影響到調(diào)試的過程和流暢度時(shí)，此處將展示這一狀態(tài)。當(dāng)連接狀態(tài)為 “已結(jié)束” 時(shí)，表明調(diào)試已被終止。

“警告和錯(cuò)誤” 展示了最近發(fā)生的錯(cuò)誤和警告信息。如果網(wǎng)絡(luò)連接斷開，此處將會(huì)詢問開發(fā)者是否需要重新連接。

手機(jī)端展示

調(diào)試過程中的手機(jī)端展示如下所示。

當(dāng)手機(jī)無(wú)網(wǎng)絡(luò)或者進(jìn)入了斷點(diǎn)狀態(tài)時(shí)，將會(huì)出現(xiàn)一個(gè)浮層提示并阻止進(jìn)一步的操作。

小游戲遠(yuǎn)程調(diào)試

目前僅支持 1.02.1809260 及以上版本工具， iOS 11.2 ~ 11.4.1 系統(tǒng) 6.7.2 及以上版本微信客戶端，以及 Android 系統(tǒng) 6.7.3 及以上版本微信客戶端。

與小程序不同的是，在調(diào)試窗口的右側(cè)可能會(huì)出現(xiàn) “Contexts” 欄，可以點(diǎn)選希望調(diào)試的不同的 JavaScript 上下文。

默認(rèn)情況下，為了方便調(diào)試，工具會(huì)上傳帶有完整源代碼的 Source Map。如果不希望上傳，或者出現(xiàn)代碼行列數(shù)映射錯(cuò)亂的情況，可以在右下側(cè)選項(xiàng)中關(guān)閉這個(gè)選項(xiàng)，并取消勾選項(xiàng)目詳情中的 “上傳代碼時(shí)自動(dòng)壓縮混淆” 選項(xiàng)。

注：目前尚不支持 Storage 面板。

多賬號(hào)調(diào)試

開發(fā)者工具需要使用微信號(hào)登錄，我們以此帳號(hào)作為所有打開的項(xiàng)目的主帳號(hào)，當(dāng)?shù)卿浀膸ぬ?hào)改變時(shí)，其登錄態(tài)將同步到所有已打開的項(xiàng)目窗口； 當(dāng)小程序/小游戲需要多個(gè)微信號(hào)才能共同完成一項(xiàng)工作的話，我們提供了多帳號(hào)調(diào)試的功能。

功能入口

通過 菜單 - 工具 - 多帳號(hào)調(diào)試 可以使用多帳號(hào)調(diào)試功能

如何使用

使用不同于主帳號(hào)的微信掃描二維碼可以添加一個(gè)測(cè)試帳號(hào)，如果該測(cè)試帳號(hào)登錄了其他開發(fā)者工具客戶端，登錄態(tài)將失效

點(diǎn)擊 ‘+’、‘-’ 我們可以添加多個(gè)測(cè)試號(hào)，或者刪除已添加的測(cè)試號(hào)；按住 ‘ctrl’ 鍵，鼠標(biāo)可以多選

我們可以同時(shí)勾選多個(gè)帳號(hào)，打開多個(gè)調(diào)試窗口來調(diào)試同一個(gè)項(xiàng)目；調(diào)試窗口與項(xiàng)目主窗口不同，只有模擬器和調(diào)試器；對(duì)項(xiàng)目代碼編輯還是需要在項(xiàng)目主窗口進(jìn)行，代碼保存后，各個(gè)調(diào)試窗口可以同步執(zhí)行最新的代碼