当前位置:首页 » 《关于电脑》 » 正文

图解 微信开发者工具 小程序源码 调试、断点标记方法 , 微信小程序调试器,真机调试断点调试方法,小程序网络API请求调试方法 总结

5 人参与  2024年10月31日 16:00  分类 : 《关于电脑》  评论

点击全文阅读


在我们使用微信开发者工具进行微信小程序开发的时候,在这个微信开发者工具的代码编辑框里面我们是无法像使用vscode, idea等IDE工具时那样直接对代码打断点进行调试,   原因是小程序实际上他就是一个web浏览器应用的包装, 在其内部使用的还是类似chrome的内核。所以微信小程序的打断点调试也和chrome应用的调试是一样的,只不过调试代码的位置不一样而已。 

微信开发者工具 调试器

如有如下微信小程序的界面,我们需要对源码中的 pages/login/login.js 文件中的业务进行断点调试。

首先我们在打开代码后需要点击 左上角的 调试器  然后就会出现右下角这部分调试器窗口, 这里的窗口是不是和 chrome的开发者工具 很像啊? 其实他就是chrome开发者工具的定制改造版。

微信小程序 调试源码位于 调试器-->Sources -> Page -->appContext --> weapp:// 这个节点下 文件后缀有 [sm] 的js文件都可以打断点进行调试,如下图

怎么样是不是很简单? 赶快动手试试吧!

微信小程序真机调试 断点标记方法

微信小程序的开发中,我们使用真机调试的时候也可以对代码打断点,打断点的位置位于  Sources -> Page -> usr 节点下, 如下图示例:

在上面的文件中打上断点,然后在真机里面进行操作,当代码运行到指定的断点处时就会被捕获。

网络API请求接口调试方法

对于小程序里面的网络API请求调试,我们可以在调试器-->Network-->XHR --> 选择请求接口 --> Initiator 里面通过查看网络请求链路的调用情况,快速定位到网络请求的发出源码位置,注意这里的请求链路可能会很长, 我们可以忽略最顶上的几个文件和以 WASxxx开头的这些文件的链路,中间部分应该就是当前的API文件请求的源码,点击文件名即可进入断点调试源码,然后就可以对源码设置断点进行调试,   如下图:

如上面的  doLogin 对应的 login.js文件,我们点击后就可以进入 断点源码文件, 选择文件名右键 点击  Reveal in sidebar 即可在当前的Page里面定位文件的位置,如下图:

这里的网络API请求的调试方法和Chrome 开发者工具中的网络 启动器 是一样的,如下图

总结: 微信小程序的源码调试 在调试器里面的断点文件位于调试器-->Source -> Page -->appContext --> weapp:// 这个节点下 文件后缀为 [sm]的js文件, 而真机调试的断点文件位于 真机调试窗口 Source -> Page -> usr 节点之下。 他们的调试方式与chrome的开发者工具里面的调试方式是一样的,只不过位置节点不一样而言, 对于其他的各种小程序的调试方法也都是大致一样的。

 


点击全文阅读


本文链接:http://zhangshiyu.com/post/180564.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 她的记忆停留在了最爱初恋的那年许欣柔楚临川完本_她的记忆停留在了最爱初恋的那年(许欣柔楚临川)
  • 全书浏览假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)_假千金的实习生男友霸占我办公室,我反手让他们倾家荡产(顾家明)全书结局
  • 童养夫让我给他的新欢出修复费(林嘉芝林思雅)_童养夫让我给他的新欢出修复费林嘉芝林思雅
  • 全文资助生女婿让我给他白月光付三千万月子中心钱(宋清玉宋雅)列表_全文资助生女婿让我给他白月光付三千万月子中心钱
  • 碎在时光里的谎言喻景宴秦明月完本_碎在时光里的谎言(喻景宴秦明月)
  • 旧爱剜心吻成灰席鄢之岑秋全书免费旧爱剜心吻成灰席鄢之岑秋全书免费
  • 结婚六年丈夫不碰我谁知儿子亲爹是寡头(纪清言傅司砚),结婚六年丈夫不碰我谁知儿子亲爹是寡头
  • 老公想换掉我的男胎,我笑他自不量力(宋薇于继业)_老公想换掉我的男胎,我笑他自不量力宋薇于继业
  • 给太子下了噬心蛊后,皇后找上门(小夭赵劼)全书浏览_给太子下了噬心蛊后,皇后找上门全书浏览
  • 豪门绝嗣!带球跑的夫人回来了!(谢长宴慕清杳)_豪门绝嗣!带球跑的夫人回来了!谢长宴慕清杳
  • 完美身材(李朵林之晴)_完美身材李朵林之晴
  • 离婚后,我和快穿系统绑定(白意秋陈荣周立慧)_离婚后,我和快穿系统绑定(白意秋陈荣周立慧)

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1