大家都知道在微信小程序開發(fā)過程中,我們會經(jīng)常不斷的去調(diào)試、測試小程序功能,今天就和大家詳細介紹幾款微信小程序調(diào)試工具供開發(fā)者使用。
微信小程序調(diào)試工具主要有7大工具分別為Wxml Panel、Console panel、Sources panel、Network panel、Appdata panel、Storage panel、Sensor panel。
1.Wxml Panel
①用來查看真實頁面結(jié)構(gòu)和結(jié)構(gòu)對應(yīng)的wxss屬性
②結(jié)合模擬器來修改wxss屬性并查看修改狀態(tài)
操作流程:調(diào)試模塊-選擇器-找到組件對應(yīng)的Wxml 代碼,具體操作如圖所示:
2.Console panel
①主要是用來輸入和調(diào)試代碼,具體操作如圖所示:
②小程序錯誤輸出,會顯示在這里,如圖所示:
3.Sources panel
①主要是用來顯示當前項目腳本文件
操作流程:調(diào)試器-Sources – define 函數(shù)-Page 代碼-尾部有 require 的主動調(diào)用,如圖所示:
4.Network panel
①主要用來查看 request和socket 請求狀態(tài)
操作流程:調(diào)試器-Network -header-查看 request header,如圖所示:
溫馨提示:uploadFile 和 downloadFile在Network panel內(nèi)無法查看,暫不支持此功能。
5.Appdata panel
①主要用來查看當前項目運行小程序Appdata數(shù)據(jù)
②實時監(jiān)控項目數(shù)據(jù)
③編輯數(shù)據(jù)的時候,需要及時反饋到界面中。
操作流程:如圖所示
6.Storage panel
①主要是用來存儲當前項目 wx.setStorage或 wx.setStorageSync數(shù)據(jù)情況。
②可以在工具對數(shù)據(jù)進行新增、修改、刪除等操作;
7.Sensor panel
①主要是為了讓開發(fā)者模擬地理位置,具體操作如圖
②用于模擬移動設(shè)備,調(diào)試重力感應(yīng) API,具體操作如下:
以上就是對微信小程序調(diào)試工具教程具體介紹,大家可以看看,還有具體的操作流程,不熟練的可以多操作幾次。如果你對微信小程序開發(fā)工具感興趣,可以多看看。