大家都知道在微信小程序开发过程中,我们会经常不断的去调试、测试小程序功能,今天就和大家详细介绍几款微信小程序调试工具供开发者使用。

微信小程序调试工具主要有7大工具分别为Wxml Panel、Console panel、Sources panel、Network panel、Appdata panel、Storage panel、Sensor panel。

1.Wxml Panel

①用来查看真实页面结构和结构对应的wxss属性

②结合模拟器来修改wxss属性并查看修改状态

操作流程:调试模块-选择器-找到组件对应的Wxml 代码,具体操作如图所示:

小程序调试工具 wxml

2.Console panel

①主要是用来输入和调试代码,具体操作如图所示:

微信小程序调试工具Console

②小程序错误输出,会显示在这里,如图所示:

小程序错误输出

3.Sources panel

①主要是用来显示当前项目脚本文件

操作流程:调试器-Sources – define 函数-Page 代码-尾部有 require 的主动调用,如图所示:

微信小程序调试工具Sources

4.Network panel

①主要用来查看 request和socket 请求状态

操作流程:调试器-Network -header-查看 request header,如图所示:

微信小程序调试工具Network

温馨提示:uploadFile 和 downloadFile在Network panel内无法查看,暂不支持此功能。

5.Appdata panel

①主要用来查看当前项目运行小程序Appdata数据

②实时监控项目数据

③编辑数据的时候,需要及时反馈到界面中。

操作流程:如图所示

微信小程序调试工具Appdata

6.Storage panel

①主要是用来存储当前项目 wx.setStorage或 wx.setStorageSync数据情况。

②可以在工具对数据进行新增、修改、删除等操作;

微信小程序调试工具Storage

7.Sensor panel

①主要是为了让开发者模拟地理位置,具体操作如图

小程序调试工具Sensor panel

②用于模拟移动设备,调试重力感应 API,具体操作如下:

小程序调试工具

以上就是对微信小程序调试工具教程具体介绍,大家可以看看,还有具体的操作流程,不熟练的可以多操作几次。如果你对微信小程序开发工具感兴趣,可以多看看。