如何调试小程序代码
在进行项目开发的时候，不可避免需要进行调试，那么如何调试小程序呢？
打开微信开发者工具后，有一个模拟器，通过模拟器能够实时预览自己写的页面，如下：
在上部工具栏中有一个调试器按钮，点击该按钮，在底部就会弹出一个调试器，如下：
在下部调试器中，有很多功能项，这里讲解一下常用的选项：
- Wxml：能够看到当前页面的结构和样式，通过这个面板能够调试结构和样式；
- Console：通过 Console 能够看到 JS 打印输出的内容；在 Console 中有一些系统打印信息，系统打印信息会影响开发者自己打印的信息，这样不方便开发者调试。可以右键点击系统打印信息，选择【Hide messages from WAServiceMainContext.js】隐藏系统打印信息，如下：
- Network：通过 Network 可以调试网络请求，即调试自己向服务器发送的请求；
- AppData：通过 AppData 可以查看当前页面定义了哪些数据；
- Storgae：通过 Storage 可以查看我们在本地存储了哪些数据；
接下来看一下工具栏中的四个功能：编译、预览、真机调试、清缓存 这个四个功能：
-
编译：有点类似于浏览器的刷新，在点击之后能够重新刷新当前页面，当我们编写代码之后发现模拟器没有任何变化时，就可以点击编译进行刷新；
-
预览：点击预览之后会弹出一个弹框，点击弹框下部的【继续浏览小程序】：
点击之后会弹出一个二维码，我们使用自己的手机扫描二维码：
扫描二维码之后，在手机上就能看到模拟器上的内容，点击手机微信顶部的【…】，选择弹出框最右侧的【开发调试】：
点击【开发调试】，会有一个新的弹框，选择弹框中的【打开调试】，微信会关闭当前界面，然后我们需要重新扫描开发者工具中的二维码：
重新扫描二维码之后，我们就可以在自己的手机上对小程序进行一些调试工作；如果希望关闭调试，同样是点击顶部右侧的【…】，在下侧弹出框中选择最右边的【开发调试】，在【开发调试】弹框中选择【关闭调试】即可；
-
真机调试：点击真机调试之后，会弹出一个二维码：
用手机微信扫描这个二维码，在扫描二维码之后，开发者模式中会弹出一个新的【真机调试】窗口，如下：
我们可以在【真机调试】面板中选择不同的功能获取信息，比如 Wxml、Console 等功能，其功能和我们上面介绍的一样；当我们在真机中发送请求之后，在 【Network】部分就能看到我们在真机中发送的请求信息，这里主要是为了方便真机调试；预览和真机调试的区别在于，真机调试会弹出一个调试器窗口；
-
清缓存：微信开发者工具缓存非常严重，当我们写好代码后，发现模拟器的效果与代码预期不符，当点击【编译】刷新之后发现效果还是不一致，这时候我们可以选择【清缓存】。但需要注意，在点击【清缓存】后，模拟器还是没有实现代码预期效果，这时候需要点击左侧顶部的【项目】按钮，选择【重新打开此项目】，然后再观看模拟器是否符合代码预期：
参考视频：尚硅谷微信小程序开发教程
