W3Cschool
恭喜您成為首批注冊用戶
獲得88經(jīng)驗值獎勵
程序調(diào)試主要有三大功能區(qū):模擬器、調(diào)試工具和小程序操作區(qū)
模擬器模擬微信小程序在客戶端真實的邏輯表現(xiàn),對于絕大部分的 API 均能夠在模擬器上呈現(xiàn)出正確的狀態(tài)。
點擊工具左下角的編譯按鈕或者使用快捷鍵 Ctrl(Command) + B,可以編譯當前代碼,并自動刷新模擬器。
同時為了幫助開發(fā)者調(diào)試具體頁面或者進入的場景值,如同,開發(fā)者可以選擇自定義編譯模式。
在項目設(shè)置頁卡,我們提供了以下幾個默認的預處理,可以解決大部分的代碼文件預處理的問題
對于高級開發(fā)者來說,完全可以自己編寫自動化構(gòu)建腳本對代碼文件進行預處理,所以我們提供了 啟用自定義處理命令 選項 開發(fā)者可以指定 編譯前/預覽前/上傳前 需要預處理的命令 開發(fā)者工具使用 shell 的方式運行指定的命令,并在控制臺中輸出命令的執(zhí)行日志
預處理命令的執(zhí)行順序
注:
調(diào)試工具分為 7 大功能模塊:Wxml、Console、Sources、Network、Appdata、Storage、Sensor
Wxml Panel 用于幫助開發(fā)者開發(fā) Wxml 轉(zhuǎn)化后的界面。在這里可以看到真實的頁面結(jié)構(gòu)以及結(jié)構(gòu)對應的 wxss 屬性,同時可以通過修改對應 wxss 屬性,在模擬器中實時看到修改的情況。通過調(diào)試模塊左上角的選擇器,還可以快速找到頁面中組件對應的 wxml 代碼。
Sources panel 用于顯示當前項目的腳本文件,同瀏覽器開發(fā)不同,微信小程序框架會對腳本文件進行編譯的工作,所以在 Sources panel 中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件,開發(fā)者的代碼都會被包裹在 define 函數(shù)中,并且對于 Page 代碼,在尾部會有 require 的主動調(diào)用。
Netwrok Pannle 用于觀察和顯示 request 和 socket 的請求情況
注:uploadFile 和 downloadFile 暫時不支持在 Network Panel 中查看
Appdata panel 用于顯示當前項目當前時刻 appdata 具體數(shù)據(jù),實時地反饋項目數(shù)據(jù)情況,可以在此處編輯數(shù)據(jù),并及時地反饋到界面上。
Storage panel 用于顯示當前項目的使用 wx.setStorage 或者 wx.setStorageSync 后的數(shù)據(jù)存儲情況。
Console Pannel 有兩大功能:
Sensor panel 有兩大功能:
開發(fā)者可以在這里選擇模擬地理位置
開發(fā)可以在這里模擬移動設(shè)備表現(xiàn),用于調(diào)試重力感應 API
小程序操作區(qū)幫助開發(fā)者模擬一些客戶端的環(huán)境操作。例如當用戶從小程序中回到聊天窗口,會觸發(fā)一個小程序被設(shè)置為后臺的api。
當小程序使用到多窗口的時候,可以在頂部操作區(qū)進行頁面切換,需要注意的是這個操作只是為了方便開發(fā)者才存在的,在真實的微信客戶端中是不會有的。
開發(fā)者工具上可以編輯和調(diào)試自定義分析的數(shù)據(jù)上報功能,點擊菜單欄中的 “工具 - 自定義分析” 即可彈窗打開自定義分析:
在頁面中可以新建、查看或修改事件,在修改事件的頁面中編輯完畢后,點擊底部的保存并測試按鈕將保存當前配置,同時工具將在調(diào)試器上提示收到最新配置,并展示配置信息,展示的內(nèi)容包括事件的 ID 和名稱,以及每個動作的觸發(fā)條件和上報數(shù)據(jù):
接著可以在模擬器中操作和觸發(fā)事件。在模擬器中刷新小程序也將獲取該測試配置,除非窗口被關(guān)閉。窗口關(guān)閉后模擬器不會再收到配置。當事件被觸發(fā)上報時,工具上會展示上報信息,包括事件 ID、觸發(fā)頁面、觸發(fā)方式、觸發(fā)時動作、以及上報的字段值和數(shù)據(jù):
同時可以在窗口中點擊 “同步結(jié)果” 會同步顯示上報的數(shù)據(jù):
關(guān)閉窗口后,配置將全部失效,模擬器不再收到配置并不再觸發(fā)上報(小程序中使用 wx.reportAnalytics API 進行的數(shù)據(jù)上報仍會在工具中輸出)。 測試成功后,可到小程序后臺發(fā)布事件配置,即可正式生效收集所定義的事件數(shù)據(jù)。
自動預覽可以實現(xiàn)編寫小程序時快速預覽,免去了每次查看小程序效果時都要掃碼或者使用小程序開發(fā)助手的麻煩。只需按下快捷鍵,保持前臺運行的微信即可自動喚出或刷新小程序。
要使用自動預覽功能,需要配合 6.6.7 及以上的微信客戶端版本。
要開始使用 “自動預覽” 功能,可以在打開預覽二維碼的時候,點擊 “自動預覽” 標簽以切換到自動預覽模式。切換到自動預覽模式后,只需按下預覽快捷鍵,或者點擊浮窗上的 “編譯并預覽” 按鈕,即可觸發(fā)自動預覽。此時工具會上傳代碼,保持前臺運行的微信客戶端會自動刷新當前開發(fā)的小程序。
當自動預覽成功時,工具欄上的預覽圖標會顯示為一個綠勾。如果預覽出錯,則會顯示為一個紅色驚嘆號,可以點擊查看詳情。
注意,自動預覽功能僅限與登陸開發(fā)者工具的同帳號微信使用。如需換回普通預覽模式,只需要點擊 “掃描二維碼預覽” 標簽即可。
用戶可以在快捷鍵設(shè)置里自定義預覽快捷鍵。
小程序開發(fā)者工具是對微信客戶端的模擬,受限于桌面設(shè)備同移動設(shè)備的差異,以及微信的一些特有數(shù)據(jù),同時考慮到開發(fā)的便捷性,部分 API 在工具和微信中有所不同。
同手機端直接調(diào)用攝像頭來掃碼不同,在 PC 或者 Mac 上調(diào)用攝像頭來掃碼完成調(diào)試是一個低效的行為,所以在開發(fā)工具上調(diào)用二維碼掃碼 API 后,開發(fā)者可以選擇一個本地的圖片來進行后續(xù)的邏輯調(diào)試,而不是真正的啟用攝像頭來掃碼,流程有所不同,但是接口的輸入和輸出是一致的。
最新版本的開發(fā)者工具已經(jīng)支持微信支付的調(diào)試,但是為了兼顧到安全,同手機上直接調(diào)用微信支付有所不同:
使用的交互有所不同,但是接口的輸入輸出工具同客戶端是保持一致的。
在日常使用中,用戶可以通過掃碼、分享打開一個小程序,這時候會依據(jù)設(shè)置的啟動頁面:path 跳轉(zhuǎn)到對應的小程序頁面(不一定是首頁)并且可以攜帶參數(shù):query。在開發(fā)者工具中,開發(fā)者同樣可以通過自定義編譯條件的方式來達到調(diào)試不同啟動頁面和啟動參數(shù)的目的。
例如下圖是選擇進入頁面是 page/API/index,參數(shù) 是 name=can
在微信客戶端中,用戶可能在各個場景下打開小程序 詳情 ,然而在開發(fā)者工具中是沒有真實的環(huán)境去模擬這些場景的。開發(fā)者可以通過條件編譯的方式來達到調(diào)試不同場景的目的。
開發(fā)者工具上調(diào)用轉(zhuǎn)發(fā)是一個模擬的行為,并不會真實的轉(zhuǎn)發(fā)給用戶,開發(fā)可以通過這個模擬行為判斷是否正確的調(diào)用了轉(zhuǎn)發(fā) API。
帶 shareTicket 的轉(zhuǎn)發(fā)可以獲取到更多的轉(zhuǎn)發(fā)信息,例如群聊的名稱以及群的標識 openGId。在小程序開發(fā)者工具上,開發(fā)者可以通過以下方式來調(diào)試帶 shareTicket 的轉(zhuǎn)發(fā)。
調(diào)用 wx.showShareMenu 的參數(shù) withShareTicket 為 true 時,點擊模擬器右上角菜單后出現(xiàn)的轉(zhuǎn)發(fā)按鈕,會出現(xiàn)一個測試群列表,如圖:
開發(fā)者點擊選取任何一個群,可以通過接口的回包獲取到 shareTicket ,通過調(diào)用 wx.getShareInfo 可以獲取到相關(guān)轉(zhuǎn)發(fā)的信息
當開發(fā)者需要調(diào)試從某一個群點開,并且?guī)в?nbsp;shareTicket 的場景時,可以使用自定義編譯中的 1044:群聊會話中的小程序消息卡片(帶 shareTicket) 同時可以選擇任一模擬測試群,如圖
同 啟動使用自定義參數(shù) 相同,提交預覽時,開發(fā)者可以通過自定義預覽的方式來達到在移動設(shè)備上調(diào)試不同啟動頁面和啟動參數(shù) 的目的。我們可以選擇已經(jīng)創(chuàng)建好的自定義編譯條件進行預覽。
小程序跳轉(zhuǎn)開發(fā)調(diào)試可以分為兩個部分
出于小程序代碼的安全考慮,在工具上調(diào)用 wx.navigateToMiniProgram 的時候,開發(fā)者工具不會真實的打開和跳轉(zhuǎn)到另外的小程序,但是工具會判斷當前小程序與需要跳轉(zhuǎn)的小程序之間的綁定關(guān)系,輸出相關(guān)信息給到開發(fā)者。開發(fā)者可以根據(jù)成功或者失敗的回調(diào)函數(shù)來判斷調(diào)用是否成功。
選擇 自定義編譯 進入場景選擇 1037 從小程序進入 可以調(diào)試小程序被打開時候是否接收到了正確的參數(shù)并做了相關(guān)處理。
選擇 自定義編譯 進入場景選擇 1038 從小程序返回 可以調(diào)試小程序返回時候是否接收到了正確的參數(shù)并做了相關(guān)處理。
真機遠程調(diào)試功能可以實現(xiàn)直接利用開發(fā)者工具,通過網(wǎng)絡(luò)連接,對手機上運行的小程序進行調(diào)試,幫助開發(fā)者更好的定位和查找在手機上出現(xiàn)的問題。
要發(fā)起一個真機遠程調(diào)試流程,需要先點擊開發(fā)者工具的工具欄上 “遠程調(diào)試” 按鈕。
此時,工具會將本地代碼進行處理打包并上傳,就緒之后,使用手機客戶端掃描二維碼即可彈出調(diào)試窗口,開始遠程調(diào)試。
使用手機掃描此二維碼,即可開始遠程調(diào)試。
要結(jié)束調(diào)試,直接關(guān)閉此調(diào)試窗口,或點擊右下角 “結(jié)束調(diào)試” 按鈕即可。
遠程調(diào)試窗口分為兩部分,分別是左側(cè)的調(diào)試器視圖、右側(cè)的信息視圖。開發(fā)者可以在調(diào)試器里直接進行代碼的調(diào)試,并查看 Storage 情況;信息視圖則可以查看目前與手機和服務(wù)器的連接情況,以及發(fā)生的錯誤信息等。
在遠程調(diào)試的調(diào)試器里,開發(fā)者可以在 Console 面板里對代碼進行調(diào)試,在 Sources 面板里查看小程序的源代碼并進行斷點單步調(diào)試,在 Storage 面板里查看小程序的 Storage 使用情況等。
注意,要在 Console 里對小程序進行調(diào)試,需要將調(diào)試的上下文切換到 VM Context 1,如圖所示。
在 Sources 面板查看源代碼時,開發(fā)者所有的文件路徑都是以 weapp:// 開頭的。
除了可以在調(diào)試器進行單步調(diào)試,開發(fā)者還能在代碼中手動插入 debugger; 語句進行斷點調(diào)試。因此,如果想要在小程序啟動的盡早時刻斷點,可以在進入遠程調(diào)試之前,編輯代碼手動在需要斷點處的代碼插入 debugger; 語句來實現(xiàn)。
WXML、AppData、Storage 面板的操作和開發(fā)者工具調(diào)試模擬器時的操作一致。注意,如果在右側(cè)信息視圖取消勾選了 “使用工具端的 Storage”,則所有的 Storage 數(shù)據(jù)將被存儲在手機上,將不再出現(xiàn) Storage 面板。
右側(cè)的信息視圖展示了手機、網(wǎng)絡(luò)連接的信息。手機信息展示手機的型號、系統(tǒng)、名稱、微信版本等信息,以及通信延時。通信延時越小,與手機的通信越流暢。
在 “連接信息” 里,展示了工具與服務(wù)器的連接信息,包括了連接狀態(tài)、服務(wù)器狀態(tài)等,當連接故障、服務(wù)器阻塞影響到調(diào)試的過程和流暢度時,此處將展示這一狀態(tài)。當連接狀態(tài)為 “已結(jié)束” 時,表明調(diào)試已被終止。
“警告和錯誤” 展示了最近發(fā)生的錯誤和警告信息。如果網(wǎng)絡(luò)連接斷開,此處將會詢問開發(fā)者是否需要重新連接。
調(diào)試過程中的手機端展示如下所示。
當手機無網(wǎng)絡(luò)或者進入了斷點狀態(tài)時,將會出現(xiàn)一個浮層提示并阻止進一步的操作。
目前僅支持 1.02.1809260 及以上版本工具, iOS 11.2 ~ 11.4.1 系統(tǒng) 6.7.2 及以上版本微信客戶端,以及 Android 系統(tǒng) 6.7.3 及以上版本微信客戶端。
與小程序不同的是,在調(diào)試窗口的右側(cè)可能會出現(xiàn) “Contexts” 欄,可以點選希望調(diào)試的不同的 JavaScript 上下文。
默認情況下,為了方便調(diào)試,工具會上傳帶有完整源代碼的 Source Map。如果不希望上傳,或者出現(xiàn)代碼行列數(shù)映射錯亂的情況,可以在右下側(cè)選項中關(guān)閉這個選項,并取消勾選項目詳情中的 “上傳代碼時自動壓縮混淆” 選項。
注:目前尚不支持 Storage 面板。
開發(fā)者工具需要使用微信號登錄,我們以此帳號作為所有打開的項目的主帳號,當?shù)卿浀膸ぬ柛淖儠r,其登錄態(tài)將同步到所有已打開的項目窗口; 當小程序/小游戲需要多個微信號才能共同完成一項工作的話,我們提供了多帳號調(diào)試的功能。
通過 菜單 - 工具 - 多帳號調(diào)試 可以使用多帳號調(diào)試功能
使用不同于主帳號的微信掃描二維碼可以添加一個測試帳號,如果該測試帳號登錄了其他開發(fā)者工具客戶端,登錄態(tài)將失效
點擊 ‘+’、‘-’ 我們可以添加多個測試號,或者刪除已添加的測試號;按住 ‘ctrl’ 鍵,鼠標可以多選
我們可以同時勾選多個帳號,打開多個調(diào)試窗口來調(diào)試同一個項目;調(diào)試窗口與項目主窗口不同,只有模擬器和調(diào)試器;對項目代碼編輯還是需要在項目主窗口進行,代碼保存后,各個調(diào)試窗口可以同步執(zhí)行最新的代碼
Copyright©2021 w3cschool編程獅|閩ICP備15016281號-3|閩公網(wǎng)安備35020302033924號
違法和不良信息舉報電話:173-0602-2364|舉報郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號
聯(lián)系方式:
更多建議: