微信开发者工具调试大法

水深无声 2022-04-23 05:42 1227阅读 0赞

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

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

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

SouthEast 1

第三步:单步调试,按调试器窗口(debugger)的向下箭头SouthEast 2(step into nextfunction call),一步步的可以往下调试,如果想跳到下一个断点,就按调试器窗口的类似于播放的小按钮SouthEast 3,英文叫resume script execution,快捷键为F8或者Ctrl+\,如下图所示

SouthEast 4

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

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

SouthEast 5

办法2:使用console.log(options);打印出来,在console窗口可以查看,如下图所示

SouthEast 6

方法3:在调试器窗口,点开Scope标签,然后再点开相应变量,如下图所示

SouthEast 7

如果我们的断点过多或者不想它们调试了,怎么让它们失效呢?

办法就是点击调试器窗口中的图标SouthEast 8,英文叫deactive breakpoints(或者快捷键:Ctrl+F8)

发表评论

表情:
评论列表 (有 0 条评论,1227人围观)

还没有评论,来说两句吧...

相关阅读

    相关 web开发工具调试

    前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大。这篇文章只是做

    相关 开发工具与GitHub

    我们都知道在最近的微信开发者工具中加入了版本控制的功能,如下图所示。 ![在这里插入图片描述][70] ![在这里插入图片描述][70 1]说到版本控制可能我们都会马上想

    相关 开发工具调试

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