微信小程序里面的单步调试和变量查看

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

第一步：打断点，我们必须在我们想要它停下来的地方打上调试断点，点击微信开发者工具的左侧的“调试”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)

微信小程序里面的单步调试和变量查看相关推荐

微信小程序体验版与调试模式不同
微信小程序体验版与调试模式不同真机体验版模式下不能发起网络请求,调试模式下可以正常发起网络请求真机体验版模式下不能发起网络请求,调试模式下可以正常发起网络请求出现以上情况,可以检查一下如下两个方 ...
HTML 点击查看更多,微信小程序加载更多和点击查看更多的实现方法
微信小程序加载更多和点击查看更多的实现方法发布时间:2020-12-31 11:01:19 来源:亿速云阅读:126 作者:小新这篇文章给大家分享的是有关微信小程序加载更多和点击查看更多的实现方 ...
开发版微信小程序手机版无法访问服务器,微信小程序安卓真机调试 202:net::ERR_CERT_AUTHORITY 无法请求接口请求接口无响应...
微信小程序真机调试 202:net::ERR_CERT_AUTHORITY 主要在安卓机. 证书使用的是腾讯云的免费证书 TrustAisa 开发者工具手机端浏览器 PC浏览器访问https:/ ...
微信小程序mqtt真机调试connect失败
问题最近学习使用微信小程序实现mqtt通信,在真机调试时遇到一个bug卡住很久:在小程序开发工具中能正常连接服务器.订阅.收发消息,但真机调试和预览不能连接到mqtt服务器. 解决问题前的环境 1. ...
IIS发布.net6 api+微信小程序/H5真机调试接口的流程
我们创建.net6 api程序,然后使用SqlSugar连接MySQL数据库,再使用iis发布,当然使用其他的也行.再开发一个微信小程序,手机运行小程序,手机运行H5,都可以看到数据库的数据,就是这么 ...
微信小程序按钮只有在调试下显示
今天客户反映微信小程序页面里面的分享按钮不显示我发现在本地和体验版的调试模式下都显示
【微信小程序】真机调试引用的外部字体不生效问题
项目场景: 前提:之前的在H5和开发者工具里面都正常: 问题描述问题:在H5和开发者工具里面字体引用都正常,但是真机调试出现问题. 在H5和开发者工具里面字体引用不正常的参考我的上一篇文章: 解决引 ...
php点击查看更多,微信小程序加载更多和点击查看更多功能介绍
这篇文章主要为大家详细介绍了微信小程序加载更多,点击查看更多功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序加载更多功能实现的具体代码,供大家参考,具体内容如下 ...
微信小程序数据传值与引用data变量
1.在微信小程序中通过点击方法进行变量赋值,可以将数值定义在e.currentTarget.dataset里通过定义data-x,将index值进行传递 <block wx:for=" ...

微信小程序里面的单步调试和变量查看

微信小程序里面的单步调试和变量查看相关推荐

最新文章

热门文章