大家都知道在微信小程序開(kāi)發(fā)過(guò)程中，我們會(huì)經(jīng)常不斷的去調(diào)試、測(cè)試小程序功能，今天就和大家詳細(xì)介紹幾款微信小程序調(diào)試工具供開(kāi)發(fā)者使用。

微信小程序調(diào)試工具主要有7大工具分別為Wxml Panel、Console panel、Sources panel、Network panel、Appdata panel、Storage panel、Sensor panel。

1.Wxml Panel

①用來(lái)查看真實(shí)頁(yè)面結(jié)構(gòu)和結(jié)構(gòu)對(duì)應(yīng)的wxss屬性

②結(jié)合模擬器來(lái)修改wxss屬性并查看修改狀態(tài)

操作流程：調(diào)試模塊-選擇器-找到組件對(duì)應(yīng)的Wxml 代碼，具體操作如圖所示:

2.Console panel

①主要是用來(lái)輸入和調(diào)試代碼，具體操作如圖所示：

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

3.Sources panel

①主要是用來(lái)顯示當(dāng)前項(xiàng)目腳本文件

操作流程：調(diào)試器-Sources – define 函數(shù)-Page 代碼-尾部有 require 的主動(dòng)調(diào)用，如圖所示：

4.Network panel

①主要用來(lái)查看 request和socket 請(qǐng)求狀態(tài)

操作流程：調(diào)試器-Network -header-查看 request header,如圖所示：

溫馨提示：uploadFile 和 downloadFile在Network panel內(nèi)無(wú)法查看，暫不支持此功能。

5.Appdata panel

①主要用來(lái)查看當(dāng)前項(xiàng)目運(yùn)行小程序Appdata數(shù)據(jù)

②實(shí)時(shí)監(jiān)控項(xiàng)目數(shù)據(jù)

③編輯數(shù)據(jù)的時(shí)候，需要及時(shí)反饋到界面中。

操作流程：如圖所示

6.Storage panel

①主要是用來(lái)存儲(chǔ)當(dāng)前項(xiàng)目 wx.setStorage或 wx.setStorageSync數(shù)據(jù)情況。

②可以在工具對(duì)數(shù)據(jù)進(jìn)行新增、修改、刪除等操作；

7.Sensor panel

①主要是為了讓開(kāi)發(fā)者模擬地理位置，具體操作如圖

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

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