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

在我们使用微信开发者工具进行微信小程序开发的时候,在这个微信开发者工具的代码编辑框 里面我们是无法 像使用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的开发者工具里面的调试方式是一样的,只不过位置节点不一样而言, 对于其他的各种小程序的调试方法也都是大致一样的。

相关推荐
難釋懷8 分钟前
微信小程序案例 - 本地生活(列表页面)
微信小程序·生活·notepad++
xkxnq15 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷15 小时前
微信小程序全局数据共享
微信小程序·小程序
郭邯15 小时前
小程序自定义组件学习笔记
微信小程序
xmdoor1 天前
微信小程序:酒店预订管理系统
微信小程序·酒店预订·酒店系统·酒店管理
The_era_achievs_hero2 天前
微信小程序141~150
微信小程序·小程序·notepad++
熊猫片沃子2 天前
小程序间跳转与传值实现方案
前端·微信小程序
normi-D182 天前
微信小程序未登录状态下的导航拦截有哪些方法可以实现
微信小程序·小程序
wocwin2 天前
uniapp微信小程序vue3封装时间段范围选择组件
vue.js·微信小程序
晓风伴月2 天前
微信小程序:在ios中border边框显示不全
ios·微信小程序·小程序