小程序基础 —— 10 如何调试小程序代码

如何调试小程序代码

在进行项目开发的时候，不可避免需要进行调试，那么如何调试小程序呢？

打开微信开发者工具后，有一个模拟器，通过模拟器能够实时预览自己写的页面，如下：

在上部工具栏中有一个调试器按钮，点击该按钮，在底部就会弹出一个调试器，如下：

在下部调试器中，有很多功能项，这里讲解一下常用的选项：

• Wxml：能够看到当前页面的结构和样式，通过这个面板能够调试结构和样式；
• Console：通过 Console 能够看到 JS 打印输出的内容；在 Console 中有一些系统打印信息，系统打印信息会影响开发者自己打印的信息，这样不方便开发者调试。可以右键点击系统打印信息，选择【Hide messages from WAServiceMainContext.js】隐藏系统打印信息，如下：
  
• Network：通过 Network 可以调试网络请求，即调试自己向服务器发送的请求；
• AppData：通过 AppData 可以查看当前页面定义了哪些数据；
• Storgae：通过 Storage 可以查看我们在本地存储了哪些数据；

接下来看一下工具栏中的四个功能：编译、预览、真机调试、清缓存 这个四个功能：

• 编译：有点类似于浏览器的刷新，在点击之后能够重新刷新当前页面，当我们编写代码之后发现模拟器没有任何变化时，就可以点击编译进行刷新；

• 预览：点击预览之后会弹出一个弹框，点击弹框下部的【继续浏览小程序】：
  
  点击之后会弹出一个二维码，我们使用自己的手机扫描二维码：
  
  扫描二维码之后，在手机上就能看到模拟器上的内容，点击手机微信顶部的【…】，选择弹出框最右侧的【开发调试】：
  
  点击【开发调试】，会有一个新的弹框，选择弹框中的【打开调试】，微信会关闭当前界面，然后我们需要重新扫描开发者工具中的二维码：
  
  重新扫描二维码之后，我们就可以在自己的手机上对小程序进行一些调试工作；

  如果希望关闭调试，同样是点击顶部右侧的【…】，在下侧弹出框中选择最右边的【开发调试】，在【开发调试】弹框中选择【关闭调试】即可；

• 真机调试：点击真机调试之后，会弹出一个二维码：
  
  用手机微信扫描这个二维码，在扫描二维码之后，开发者模式中会弹出一个新的【真机调试】窗口，如下：
  
  我们可以在【真机调试】面板中选择不同的功能获取信息，比如 Wxml、Console 等功能，其功能和我们上面介绍的一样；当我们在真机中发送请求之后，在 【Network】部分就能看到我们在真机中发送的请求信息，这里主要是为了方便真机调试；

  预览和真机调试的区别在于，真机调试会弹出一个调试器窗口；

• 清缓存：微信开发者工具缓存非常严重，当我们写好代码后，发现模拟器的效果与代码预期不符，当点击【编译】刷新之后发现效果还是不一致，这时候我们可以选择【清缓存】。但需要注意，在点击【清缓存】后，模拟器还是没有实现代码预期效果，这时候需要点击左侧顶部的【项目】按钮，选择【重新打开此项目】，然后再观看模拟器是否符合代码预期：
  参考视频：尚硅谷微信小程序开发教程