微信小程序开发系列教程
微信小程序开发系列一：微信小程序应用程序和开发环境的构建
微信小程序开发系列之二：微信小程序视图设计
本教程的前两篇文章介绍了如何使用下图所示的微信开发人员工具自动生成Hello World 微信小程序，并说明了此自动生成的微信小程序视图的开发原理。
本系列的下一步将继续介绍微信小程序控制器index.js的实现。在上一篇文章微信小程序视图源代码说明中，我们通过逐行解释代码来介绍微信小程序视图的基本开发思想。但是就控制器index.js而言，仅进行静态代码演练是不够的。我们需要启动微信小程序并通过单步调试逐行对其进行说明。 微信小程序的控制可以通过控制器的调用上下文来实现。加深了解。
为此，我们必须首先学习微信小程序的调试方法。
打开微信开发人员工具，然后单击工具栏上的“调试器”按钮：
现在，开发人员工具右侧的区域从上到下分为两部分：上方的蓝色区域是代码编辑页面，而下方的红色区域是微信小程序的调试工具。
已经完成前端开发的朋友可以一眼看出这实际上是Chrome的开发者工具。
我还在微信公共帐户“ Wang Zixi”上撰写了有关使用Chrome开发者工具的介绍，有兴趣的朋友可以查看一下：
链接如下：
在调试器中打开控制器index.js，单击行号“ 3”，然后自动突出显示行号3，表明已在第3行成功设置了断点。
单击“编译”按钮，我们的小程序将自动启动，并且控制器中设置的断点将被自动触发。这样，我们可以通过单步调试来学习微信小程序控制器的调用上下文。
微信小程序的调试器仍然可以在手机上打开。在手机上访问微信小程序，然后点击屏幕右下角的vConsole按钮。
然后，整个电话屏幕充满微信小程序的调试器。与计算机上安装的微信开发人员工具相比，该调试器只能显示日志并执行一些简单的JavaScript操作，但不能像在计算机上那样调试JavaScript代码。
我们注意到，上图中的“ command ...”输入框可以输入一些简单的JavaScript命令，例如console.log（“ Jerry”）。
然后，您可以在手机的调试器上看到Jerry的输出：
您可以在[系统]标签上看到一些微信小程序与性能相关的参数和性能参数：
MicroMessenger版本号：6.6.6
微信lib：库文件版本2.0.9
导航：3毫秒的跳跃时间3毫秒
domComplete（domLoaded）：dom加载总共需要19毫秒
“ WXML”标签页可以显示当前呈现的视图的详细信息：
每个人都熟悉微信小程序的调试器，您可以在下一章开始学习微信小程序控制器。