微信小程序调试工具教程

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

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

1.Wxml Panel

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

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

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

2.Console panel

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

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

3.Sources panel

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

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

4.Network panel

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

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

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

5.Appdata panel

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

②实时监控项目数据

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

操作流程：如图所示

6.Storage panel

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

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

7.Sensor panel

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

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

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