微信开发者工具的调试方法-创新互联

这篇文章将为大家详细讲解有关微信开发者工具的调试方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

由于小程序的火爆,于是去开源中国接了个私活,开发一个小程序。于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下。

微信开发者工具调试大法

第一步：打断点，我们必须在我们想要它停下来的地方打上调试断点，点击微信开发者工具的左侧的“调试”tab,然后选择中间窗口中的”Sources”Tab，在Sources页中点开”Top”根节点，层层打开，找到自己想要调试的js文件，一般是打那种.js后面带[sm]，如index.js[sm]，非index.js，当然这里之后想修改内容不能在”调试”模式下修改，而要转到”编辑”模式，之前我老容易犯这个错误，打开index.js[sm]文件后，点击左边的行上的数字，就会由灰色背景变成蓝色背景，这样断点就打好了，(如果不想要了，也可以点击就会取消)如下图所示:

第二步：运行，首先点击编译上面的那个运行小图标(或者快捷键ctrl+b)，然后操作到你想要的那个界面或者触发某个动作，程序自动会跑到断点处代码，如下图所示:

第三步：单步调试，按调试器窗口(debugger)的向下箭头(stepintonextfunctioncall)，一步步的可以往下调试，如果想跳到下一个断点，就按调试器窗口的类似于播放的小按钮,英文叫resumescriptexecution，快捷键为F8或者Ctrl+\,如下图所示

微信开发者工具使用方法

如果想看调试中变量的运行值怎么办？有许多办法，这里以查看上个界面传来的options变量值为例

办法1：让鼠标指针放在变量上，他会有提示框，框内就是变量值，如下图所示

办法2:使用console.log(options);打印出来，在console窗口可以查看。

关于“微信开发者工具的调试方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。