微信小程序教程入门篇【5】,微信开发工具的调试功能

2017-12-20 作者：黄先生

1. 开篇导言

本节目标：通过之前的讲解，相信大家对于微信小程序本身有了一定的认识。本篇将专注于讲解IDE的调试功能。
目标用户：无编程经验，但对微信小程序感兴趣的同学。
学习目标：了解并使用微信开发工具的调试功能。
案例分析：helloworld小程序。
代码下载
传送门：

上一篇：微信小程序教程-入门篇【4】
下一篇：微信小程序教程-入门篇小结【6】

备注：有编程经验或看过微信官网简易教程的同学，请酌情略过该章节。

2. 调试区
如下图：
微信小程序教程入门篇【5】,微信开发工具的调试功能

调试工具分为6 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage。
熟悉Chrome浏览器(F12)的同学，可能眼前一(没错，基本一致)。

3. Wxml panel
Wxml panel：用于帮助开发者开发 Wxml 转化后的界面。
通过对于页面结构及对应的 wxss 属性的修改，可以在模拟器中实施查看效果。
通过调试模块左上角的选择器，可快速定位页面中组件对应的 wxml 代码。
微信小程序教程入门篇【5】,微信开发工具的调试功能

(图片来自于官网)

4. Sources panel
Sources panel：用于显示当前项目的脚本文件。
同浏览器开发不同，微信小程序框架会对脚本文件进行编译的工作，开发者看到的文件是经过处理之后的脚本文件，
开发者的代码都会被包裹在 define 函数中，并且对于 Page 代码，在尾部会有 require 的主动调用。
微信小程序教程入门篇【5】,微信开发工具的调试功能

代码导航栏(蓝色区域部分)

top下为域名列表。每个域名中包含与其相关的脚本文件。

代码显示区(绿色区域部分)

代码区的左侧，通过点击可以下断点。
左下角的【{}】可以format代码结构。

调试区(橙色部分)

Watch：可以添加要查看的expressions(变量、表达式)。
Call Stack：查看调用堆栈。
其它部分留着以后详谈。

5. Network panel
Netwrok Pannle 用于观察和显示 request 和 socket 的请求情况。后章节详细讨论。
微信小程序教程入门篇【5】,微信开发工具的调试功能

(来自于官网)

6. Appdata panel
Appdata panel 用于显示当前项目当前时刻 appdata 具体数据，实时地反馈项目数据情况，可以在此处编辑数据，并及时地反馈到界面上。
微信小程序教程入门篇【5】,微信开发工具的调试功能

上图将【Hello World】更改为【Hello MINA】

7. Storage panel
Storage panel 用于显示当前项目的使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。本项目为log，见下图：
微信小程序教程入门篇【5】,微信开发工具的调试功能

8. Console panel
Console panel：输出小程序的log或者输入，调试代码，如下图绿色部分。
微信小程序教程入门篇【5】,微信开发工具的调试功能

通过点击console中右侧椭圆部分，可以快速定位到相应的文件中(【index.js [sm]:24 onLoad】)。
橙色部分为调试代码的例子。

9. 小结
注意：多动手来习惯于用调试工具来解决项目的问题。

10. 预告
下一篇将对入门篇做一个总结。

长沙总部热线

4006-089-731

北京公司

4006-601-982

深圳公司

4008-400-198

一对一咨询

立即扫码关注

产品试用获取方案及报价

注册小程序