微信小程序开发教程系列

微信小程序开发系列一：微信小程序申请及开发环境搭建

微信小程序开发系列二：微信小程序视图设计

本教程前两篇文章介绍了如何使用下图所示的微信开发者工具自动生成微信小程序，并讲解了这个自动生成的微信小程序的视图开发原理。

这个系列的下一篇会继续介绍这个微信小程序的.js的实现。在上一篇微信小程序view源码的文章中我们通过一行行代码的讲解介绍了微信小程序view的基本开发思路。然而在讲到.js的时候，只进行静态的代码走一遍是不够的，我们需要启动微信小程序，通过单步调试的方式一行行讲解。通过的调用上下文，我们可以对微信小程序的实现有更深入的了解。

要做到这一点，首先我们要学会如何调试微信小程序。

打开微信开发者工具，点击工具栏上的“调试器”按钮：

开发者工具右侧的区域现在从上到下被一分为二：上方蓝色区域依然是代码编辑页面，下方红色区域是微信小程序的调试工具。

做过前端开发的朋友一眼就能看出来，这其实是一个开发者工具。

我在自己的微信公众号“汪子兮”上也写过一篇介绍开发者工具使用技巧的文章，有兴趣的朋友可以看看：

链接如下：

在调试器中打开我们的.js，单击行号“3”，然后行号3会自动高亮显示，表示在第3行成功设置断点。

点击“编译”按钮，我们的小程序就会自动启动，并且会自动触发控制器中设置的断点。这样我们就可以通过单步调试来了解微信小程序控制器的调用上下文了。

手机端依然可以打开微信小程序调试器，在手机上进入微信小程序，点击屏幕右下角的按钮。

然后整个手机屏幕就全是微信小程序调试器了，相比电脑上安装的微信开发者工具，这个调试器只能显示日志和进行一些简单的操作，却不能像在电脑上一样调试代码。

我们注意到上图中的“…”输入框可以用来输入一些简单的命令，例如.log(“”)。

然后就可以在手机的调试器上看到输出：

标签页展示了一些微信小程序性能相关的参数以及性能参数：

版本号：6.6.6

lib：库文件版本2.0.9

：3ms 跳转时间3毫秒

（）：DOM 加载总共耗时 19 毫秒

WXML选项卡可以显示当前渲染的视图的详细信息：

现在你已经熟悉了微信小程序调试器，你可以在下一章开始学习微信小程序控制器。

获取更多原创技术文章，请关注公众号“汪子兮”或扫描下方二维码：