大家都知道在微信小程序開發(fā)過程中,我們會(huì)經(jīng)常不斷的去調(diào)試、測(cè)試小程序功能,今天就和大家詳細(xì)介紹幾款微信小程序調(diào)試工具供開發(fā)者使用。
微信小程序調(diào)試工具主要有7大工具分別為Wxml Panel、Console panel、Sources panel、Network panel、Appdata panel、Storage panel、Sensor panel。
1.Wxml Panel
①用來查看真實(shí)頁面結(jié)構(gòu)和結(jié)構(gòu)對(duì)應(yīng)的wxss屬性
②結(jié)合模擬器來修改wxss屬性并查看修改狀態(tài)
操作流程:調(diào)試模塊-選擇器-找到組件對(duì)應(yīng)的Wxml 代碼,具體操作如圖所示:

2.Console panel
①主要是用來輸入和調(diào)試代碼,具體操作如圖所示:

②小程序錯(cuò)誤輸出,會(huì)顯示在這里,如圖所示:

3.Sources panel
①主要是用來顯示當(dāng)前項(xiàng)目腳本文件
操作流程:調(diào)試器-Sources – define 函數(shù)-Page 代碼-尾部有 require 的主動(dòng)調(diào)用,如圖所示:

4.Network panel
①主要用來查看 request和socket 請(qǐng)求狀態(tài)
操作流程:調(diào)試器-Network -header-查看 request header,如圖所示:

溫馨提示:uploadFile 和 downloadFile在Network panel內(nèi)無法查看,暫不支持此功能。
5.Appdata panel
①主要用來查看當(dāng)前項(xiàng)目運(yùn)行小程序Appdata數(shù)據(jù)
②實(shí)時(shí)監(jiān)控項(xiàng)目數(shù)據(jù)
③編輯數(shù)據(jù)的時(shí)候,需要及時(shí)反饋到界面中。
操作流程:如圖所示

6.Storage panel
①主要是用來存儲(chǔ)當(dāng)前項(xiàng)目 wx.setStorage或 wx.setStorageSync數(shù)據(jù)情況。
②可以在工具對(duì)數(shù)據(jù)進(jìn)行新增、修改、刪除等操作;

7.Sensor panel
①主要是為了讓開發(fā)者模擬地理位置,具體操作如圖

②用于模擬移動(dòng)設(shè)備,調(diào)試重力感應(yīng) API,具體操作如下:

以上就是對(duì)微信小程序調(diào)試工具教程具體介紹,大家可以看看,還有具體的操作流程,不熟練的可以多操作幾次。如果你對(duì)微信小程序開發(fā)工具感興趣,可以多看看。

