微信小程序开发系列教程：开发者工具右边的区域
发表时间：2023-12-09 18:46:35
文章来源：炫佑科技
浏览次数：155
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
微信小程序开发系列教程：开发者工具右边的区域
微信小程序开发系列一：微信小程序应用及开发环境搭建
微信小程序开发系列二：微信小程序的视图设计
本教程的前两篇文章介绍了如何使用下图所示的微信开发工具自动生成Hello World微信小程序，并讲解了这个自动生成的微信小程序的视图开发原理。
本系列下一步将继续介绍这个微信小程序的控制器index.js的实现。 在之前关于微信小程序视图源码的文章中，我们通过逐行讲解代码的方式介绍了微信小程序视图的基本开发思路。 但当涉及到控制器index.js时，静态代码检查是不够的。 我们需要启动微信小程序，通过单步调试逐行解释。 可以通过控制器的调用上下文来控制微信小程序。 对实现有更深入的了解。
为此，我们首先要学会如何调试微信小程序。
打开微信开发工具，点击工具栏上的“调试器”按钮：
开发工具右侧的区域现在从上到下分为两个区域：上面的蓝色区域仍然是代码编辑页面，下面的红色区域是微信小程序的调试工具。
做过前端开发的朋友一看就知道，这其实是*好的开发工具。
我还在我的微信公众号“王子熙”上写了一篇开发工具的使用介绍。 有兴趣的朋友可以看看：
链接如下：#rd
在调试器中打开我们的控制器index.js，点击行号“3”微信小程序开发系列教程：开发者工具右边的区域，然后行号3自动高亮显示，说明在第3行已经成功设置了断点。
点击“编译”按钮微信小程序开发哪个平台好，我们的小程序自动启动，并自动触发控制器中设置的断点。 这样我们就可以通过单步调试获知微信小程序控制器的调用上下文了。
微信小程序的调试器在手机上仍然可以打开。 在手机上访问微信小程序，点击屏幕右下角按钮。
然后整个手机屏幕就被微信小程序的调试器占满了。 与安装在电脑上的微信开发工具相比，该调试器只能显示日志和执行一些简单的操作，但无法像在电脑上那样调试代码。
我们注意到上图中的“...”输入框可以输入一些简单的命令，例如.log(“Jerry”)。
然后你可以在手机的调试器上看到 Jerry 的输出：
在该标签页中，可以看到一些与微信小程序性能相关的参数和性能参数：
版本号：6.6.6
lib：库文件版本2.0.9
：3ms跳跃时间3毫秒
(): DOM加载总共耗时19毫秒
WXML 选项卡可以显示当前渲染视图的详细信息：
熟悉了微信小程序调试器后，就可以开始下一章关于微信小程序控制器的内容了。
想要获取更多Jerry原创技术文章，请关注公众号“王子熙”或扫描下方二维码：
