微信小程序工具程序調(diào)試,模擬器、調(diào)試工具和小程序操作區(qū)

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

模擬器

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

編譯代碼

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

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

調(diào)試工具

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

Wxml Panel

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

Sources panel

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

Network panel

Netwrok Pannle 用于觀察和顯示 request 和 socket 的請求情況

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

Appdata panel

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

Storage panel

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

Console Pannel

Console Pannel 有兩大功能：

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

   

• 小程序的錯誤輸出，會顯示在此處

Sensor panel

Sensor panel 有兩大功能：

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

   

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

小程序操作區(qū)

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

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

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

開發(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ù)。