笔者由于工作需要，曾经参加过一个微信小程序同 SAP 系统集成的项目，因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来，希望对相关学习者有所帮助。
本系列的前一篇文章：微信小程序开发系列 (一) ：开发环境搭建和微信小程序的视图设计与开发, 我们介绍了微信小程序的开发环境搭建，并且从一个 Hello World 级别的例子，了解了微信小程序 MVC 架构中 View 即视图层的设计基础知识。
本文我们首先来学习微信小程序如何单步调试。
微信小程序的单步调试步骤
在上一篇微信小程序视图源代码的讲解里，我们通过逐行讲解代码的方式，介绍了微信小程序视图的基本开发思路。但是学习控制器 index.js 的实现，仅仅采取静态的代码走查还不够，我们需要将微信小程序启动起来，通过单步调试的方式逐行讲解，通过控制器的调用上下文能对微信小程序的控制器实现有更深入的了解。
为此我们先要学会微信小程序的调试方法。
打开微信开发者工具，点击工具栏的 调试器按钮：
开发者工具右边的区域现在从上到下一分为二：上面蓝色区域还是代码编辑页面，下面红色区域就是微信小程序的调试工具。
做过前端开发的朋友们，可以一眼就看出这其实就是 Chrome 开发者工具。
在调试器里打开我们的控制器 index.js, 单击行号 3 , 然后行号 3 自动被高亮，说明第 3 行已经成功设置好了一个断点。
点击 编译 按钮，我们的小程序自动启动，设置在控制器里的断点就自动触发了。这样我们就可以通过单步调试的方式来学习微信小程序控制器的调用上下文了。
微信小程序的调试器在手机上仍然可以打开。在手机上访问微信小程序，点击屏幕右下角的 vConsole 按钮。
接着整个手机屏幕就被微信小程序的调试器充满了。这个调试器和电脑上安装的微信开发者工具相比，仅仅能显示日志和执行一些简单的 JavaScript 操作，但是不能像电脑上那样，进行 JavaScript 代码的调试。
我们注意到上图的 command... 输入框可以输入一些简单的 JavaScript 命令，比如console.log(“Jerry”)
然后可以在手机的调试器上看到输出的 Jerry：
System 标签页可以看到一些微信小程序性能相关的参数和性能参数，比如：
- MicroMessenger 版本号：6.6.6
- Wechat lib: 库文件版本2.0.9
- navigation: 3ms 跳转时间 3 毫秒
- domComplete(domLoaded): dom 加载总共花费 19 毫秒
WXML 标签页能显示当前渲染好的视图的明细：
大家熟悉了微信小程序的调试器，就能继续进行微信小程序控制器的学习了。
