微信小程序开发系列教程三:微信小程序的调试方法

  • 时间:
  • 浏览:0

navigation: 3ms 跳转时间3毫秒

MicroMessenger版本号:6.6.6

微信小线程开发系列二:微信小线程的视图设计

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"可能扫描下面二维码:

Wechat lib: 库文件版本2.0.9

以后可不要能在手机的调试器上看多输出的Jerry:

打开微信开发者工具,点击工具栏的“调试器”按钮:

大伙儿注意到上图的“command...”输入框可不要能输入一些简单的JavaScript命令,比如console.log("Jerry")。

大伙儿熟悉了微信小线程的调试器,就能开始英语 下一章节关于微信小线程控制器的学习了。

WXML标签页能显示当前渲染好的视图的明细:

domComplete(domLoaded): dom加载总共花费19毫秒

微信小线程的调试器在手机上仍然可不要能打开。在手机上访问微信小线程,点击屏幕右下角的vConsole按钮。

接着整个手机屏幕就被微信小线程的调试器充满了。你这名调试器和电脑上安装的微信开发者工具相比,仅仅能显示日志和执行一些简单的JavaScript操作,以后这麼像电脑上那样,进行JavaScript代码的调试。

点击“编译”按钮,大伙儿的小线程自动启动,设置在控制器里的断点就自动触发了。原来大伙儿就可不要能通过单步调试的措施来学习微信小线程控制器的调用上下文了。

做过前端开发的一些大伙儿,可不要能一眼看多出你这名太好以后Chrome的开发者工具。

链接如下:https://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=224748460 6&idx=1&sn=314d749da91a94064ef1e258657a0974&chksm=ead5b105dda23813addbca28689e3fcc22c0b47cb2d4f49557ec796edfa8fe88c43d2c70567a#rd

System标签页可不要能看多一些微信小线程性能相关的参数和性能参数:

为此大伙儿好难法学会微信小线程的调试措施。

你这名系列的下一步,会继续介绍你这名微信小线程的控制器index.js的实现。在上一篇微信小线程视图源代码的讲解里,大伙儿通过逐行讲解代码的措施,介绍了微信小线程视图的基本开发思路。以后讲控制器index.js, 仅仅采取静态的代码走查还匮乏,大伙儿可不要能将微信小线程启动起来,通过单步调试的措施逐行讲解,通过控制器的调用上下文能对微信小线程的控制器实现有更深入的了解。

你这名教程的前两篇文章,介绍了咋样用下图所示的微信开发者工具自动生成2个多多多多Hello World的微信小线程,并讲解了你这名自动生成的微信小线程的视图开发原理。

在调试器里打开大伙儿的控制器index.js, 单击行号"3", 以后行号3自动被高亮,说明第3行可能成功设置好了2个多多多多断点。

微信小线程开发系列一:微信小线程的申请和开发环境的搭建

开发者工具右边的区域现在从上到下一分为二:里面淡蓝色区域还是代码编辑页面,下面红色区域以后微信小线程的调试工具。

我在我的微信公众号“汪子熙”上也写过一篇Chrome开发者工具的使用技巧介绍,感兴趣的大伙儿可不要能去看看: