• 总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍下微信小程序的一般用到的调试方法和...

    原文出处:http://blog.csdn.net/bright789/article/details/54709594 


    在微信小程序开始学习与开发的过程中,总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍下微信小程序的一般用到的调试方法和打印日志以及看到变量里面的运行值。

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

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


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


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

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


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


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


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

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

    展开全文
  • 1.打开调试器,在sources下找到要调试的文件,在行号前单击打上断点 2.点击右边的播放按钮即可单步调试,右边还有单步跳过等功能,鼠标放在变量上可以查看变量值    ...

    1.打开调试器,在sources下找到要调试的文件,在行号前单击打上断点

    2.点击右边的播放按钮即可单步调试,右边还有单步跳过等功能,鼠标放在变量上可以查看变量值

     

     

    展开全文
  • 于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...

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

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

     

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

     

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

     

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

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

     

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

     

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

     

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

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

    展开全文
  • 总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍下微信小程序的一般用到的调试方法和...

    在微信小程序开始学习与开发的过程中,总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍下微信小程序的一般用到的调试方法和打印日志以及看到变量里面的运行值。

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

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


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


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

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


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


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


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

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


    展开全文
  • 假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试. 假设我的web应用的访问入口是如下公众号菜单的"预约"按钮: 那么为了能够在微信开发者工具里调试,...

    假设我用vue开发了一个web应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试.

    假设我的web应用的访问入口是如下公众号菜单的"预约"按钮:

    那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在web开发者工具里,将我本人的微信号添加进去:

    点击"绑定开发者账号":

    输入待绑定的微信账号:

    点击绑定,该微信号会收到一条消息,询问是否绑定:

    点击同意操作完成绑定.

    接下来,把要调试的web应用的url放到微信开发者工具地址栏里,回车之后,微信开发者工具就会弹出一个询问窗口,点击Allow之后,就可以在微信开发者工具提供的类似Chrome开发者工具调试器一样的界面里进行单步调试了.

    这个粘贴到地址栏的url很有讲究。

    https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect
    其中appid=后面的值,是从微信公众号控制台里拷贝出来的appid:

    redirect_uri, 即为我们开发的web应用,部署到服务器之后生成的url,需要经过url encode处理:https://www.xxx.com/smart

    这个url准备好之后,将其粘贴到微信开发者工具地址栏里,回车,即可看到一个对话窗口,要求获得我们公开信息的许可:

    点击Allow之后,就可以像使用Chrome开发者工具的调试器一样,在微信开发者工具里进行单步调试了:

    要获取更多Jerry的原创文章,请关注公众号"汪子熙":

    展开全文
  • 总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍下微信小程序的一般用到的调试方法和...
  • 于是开始学习微信小程序开发文档,下载微信开发者工具,进行开发了。开发过程中需要调试,开始只是打日志或者断言,觉得很不方便,希望跟IDEA一样的调试器,于是摸索如下: 第一步:打断点,我们必须在我们想要它停下来的...
  • 总有一些东西,想看看它跑起来的内容与我们编程时想的是否一致,于是就想到了能不能单步调试或者打出一些我们想要的变量的内容,以便我们做进一步的开发和调整,现在我就要介绍下微信小程序的一般用到的调试方法和...
  • 为了帮助开发者简单和高效地开发和调试微信小程序,我们在原有的公众号网页调试工具的基础上,推出了全新的微信开发者工具,集成了公众号网页调试和小程序调试两种开发模式。 使用公众号网页调试,开发者可以调试...
  • A 新增 PC 微信开发版小程序自动预览 A 新增 自动真机调试 A 新增 多帐号调试默认测试帐号 A 新增 周期性更新调试支持 A 新增 云开发控制台代金券支付 A 新增 多线程 worker 支持单步调试 A 新增 公众号网页...
  • (1)编辑下快捷键: ctrl+[,ctrl+]:代码行缩进 shift+alt+F:代码格式化 shift+alt+up, shift+alt+down:向上向下复制一行 ctrl+shift+Enter:在当前行上方...(2)调试工具页面 1、Console窗口用来显示小...
  • 我们前一篇已经讲了,微信平台(不管是订阅号还是服务号)和我们的网站进行交互时,都是通过微信平台开放给外部系统的接口调用来实现的,也就是说,粉丝向公众号发送一次交互(文字,图片,声音或者菜单点击都算交互...
  • 本文主要记录一下初次开发小程序一些注意事项,小程序开发语言,对小程序的审核要求,小程序的特点,开发特点,后面会再写下是否有三方好用的工具,及开发中遇到的js,html,css 相关的问题及解决方法。毕竟借小程序写...
  • 这个教程的前两篇文章,介绍了如何用下图所示的微信开发者工具自动生成一个Hello World的微信小程序,并讲解了这个自动生成的微信小程序的视图开发原理。 这个系列的下一步,会继续介绍这个微信小程序的控制器...
  • 调试代码,话不多说~~~ ...   2.Sources下面,找到想要调试的内容,打开后再某几行打上断点,然后在点击上面的“编译”按钮,这样就已经开始调试代码了,但是要在模拟器中进行相应操作,让程序运行到断点处即可。...
  • 微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序之...
  • 微信商城开发系列教程第二讲》 公众号平台接口配置及调试 [本系列文章转载自:walkingmanc(作者:陈伟)] 在上一篇中,我们讲解了如何申请微信公众号,公众平台开发的基本原理以及服务器环境的...
  • 使用DelphiXE2和Intraweb14.0.50进行微信开发
1 2 3 4 5 ... 20
收藏数 674
精华内容 269