注冊(cè)

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

2020-09-27
導(dǎo)讀:程序調(diào)試主要有三大功能區(qū):模擬器、調(diào)試工具和小程序操作區(qū) 模擬器 模擬器模擬微信小程序在客戶端真實(shí)的邏輯表現(xiàn),對(duì)于絕大部分的 API 均能夠在模擬器上呈現(xiàn)出正確的狀態(tài)。 編...

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

 

模擬器


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

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

編譯代碼


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

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

 


調(diào)試工具


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

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

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 代碼。

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

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í)地反饋到界面上。

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

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ù)。

更多微信小程序開發(fā)教程,可以關(guān)注hi小程序。
重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)