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

—— 2017 ——

12/20

00:00

来源：

作者：未知

栏目：小程序开发

2017/12/20 0:00:00 来源：不详作者：未知

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. 预告
下一篇将对入门篇做一个总结。

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序 SaaS

上/下篇

微信小程序教程入门篇【6】,无编程经验微信小程序基本知识点

本帖最后由狂兔科技于 2016-11-1 22:18 编辑 1. 开篇导言本节目标：对于入门篇的总结目标用户：无编程经验，但对微信小程序感兴趣的同学。学习目标：对微信小程序的研发，有概要..

微信小程序 2017/12/20 0:00:00
微信小程序教程入门篇【4】,MINA框架的视图层逻辑层

本帖最后由狂兔科技于 2016-11-1 18:14 编辑 1. 开篇导言本节目标：通过上一节的讲解，相信大家对小程序框架MINA的目录结构和配置有了一定的了解。接下来将会讲解视图层，逻辑层

微信小程序SaaS 2017/12/20 0:00:00