图解 微信开发者工具 小程序源码 调试、断点标记方法 , 微信小程序调试器,真机调试断点调试方法,小程序网络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的开发者工具里面的调试方式是一样的,只不过位置节点不一样而言, 对于其他的各种小程序的调试方法也都是大致一样的。
相关文章:
图解 微信开发者工具 小程序源码 调试、断点标记方法 , 微信小程序调试器,真机调试断点调试方法,小程序网络API请求调试方法 总结
在我们使用微信开发者工具进行微信小程序开发的时候,在这个微信开发者工具的代码编辑框里面我们是无法像使用vscode, idea等IDE工具时那样直接对代码打断点进行调试, 原因是小程序实际上他就是一个web浏览器应用的包装, 在其内部使用的还是类似chrome的…...
注释,换行,控制台输入输出,命名空间,省略return语句
注释 1.单行注释 // 2.多行注释 /*注释内容*/ 解释代码的作用;注释多余内容;注释不会影响代码执行 换行 \nstd::endl 控制台输入输出 输出123456 可一次性输出多个 std::cout<<"123456"//示例获取控制台输入内容,存储在…...
宠物空气净化器该怎么选?希喂,小米、安德迈这三款好用吗?
不得不说,虽然现在购物网站的活动不少,可力度都好弱啊!我想买宠物空气净化器很久了,觉得有点贵,一直没舍得入手。价格一直没变化,平台小活动根本没什么优惠,只能寄希望于双十一了,准…...
【Mybatis篇】Mybatis的注解开发
🧸安清h:个人主页 🎥个人专栏:【计算机网络】,【Mybatis篇】 🚦作者简介:一个有趣爱睡觉的intp,期待和更多人分享自己所学知识的真诚大学生。 文章目录 🎯 Select注解 …...
NEC协议
NEC协议是一种红外线通信协议,广泛应用于家电遥控器和其他红外线设备之间的通信。以下是对NEC协议的详细解释和介绍: 一、开发背景与应用 NEC协议由日本电子公司NEC(日本电气公司)开发,因其简单、易于实现和广泛兼容…...
Meta 发布 Quest 3S 头显及 AR 眼镜原型:开启未来交互新视界
简介 在科技的浪潮中,Meta 始终站在创新的前沿,不断为我们带来令人惊叹的虚拟现实和增强现实体验。2024 年 10 月 6 日,让我们一同聚焦 Meta 最新发布的 Quest 3S 头显及 AR 眼镜原型(Orion),探索这两款产品…...
【CSS】水平垂直居中
给父盒子设置属性 flex display: flex;写在父元素上这就是定义了一个伸缩容器justify-content:center 设置主轴对齐方式为居中,默认是横轴。子元素居中。align-items:center 设置纵轴对齐方式为居中,默认是纵轴。子元素居中。 给…...
欧盟零毁林法案 EUDR
EUDR法案,即欧盟零毁林法案(EU Deforestation Regulation),是欧盟为了减少全球森林砍伐和退化,应对气候变化和生物多样性丧失而制定的一项重要法规。以下是对该法案的详细解读: 一、法案背景与目的 EUDR法…...
26.删除有序数组中的重复项
题目::26. 删除有序数组中的重复项 - 力扣(LeetCode) 思路:只要不和前面的数一样就可以移动指针,进行赋值 代码: class Solution { public:int removeDuplicates(vector<int>& nums) {int slow 0 ;for(int fast 1; fast < …...
JAVA实现公众号扫码登录和关注功能实战
前言 使用第三方插件 <dependency><groupId>com.github.binarywang</groupId><artifactId>weixin-java-mp</artifactId><version>4.6.0</version> </dependency>准备APPID和appSecet 登录微信公众号后台,复制ap…...
初识Mysql/备份,基础指令
1,MySQL登录指令: mysql -h 127.0.0.1 -P3306 -u -p 其中,-h指明登录部署了mysql服务的主机 -P指明要访问的端口号, -u指明登录用户 -p输入密码 2,数据库基础 mysql:表示的是客户端 mysqld&…...
没想到吧!线稿上色居然可以这么简单
前言 在创意无限的数字艺术世界里,艺术创作中的线稿上色,向来是件既费时又需技巧的活儿,寻找一款既能激发灵感又能简化繁琐流程的工具,是每位艺术家心中的向往。 今天,为大家推荐一款革命性的线稿上色AI工具——千鹿…...
修改Docker的默认存储路径
docker默认存储路径:/var/lib/docker/ 执行 docker info 查看,得到以下信息 Docker Root Dir: /var/lib/docker/Debug Mode: falseRegistry: https://index.docker.io/v1/Labels:Experimental: falseInsecure Registries: 1.修改docker配置 要修改默认…...
深入计算机语言之C++:C到C++的过度
🔑🔑博客主页:阿客不是客 🍓🍓系列专栏:从C语言到C语言的渐深学习 欢迎来到泊舟小课堂 😘博客制作不易欢迎各位👍点赞⭐收藏➕关注 一、什么是C C(c plus plusÿ…...
HR面试篇
一.面试中被问职业规划 HR感兴趣的不是你的职业规划,感兴趣的是你的职业规划和他们公司有没有关系。 或者说他们公司能不能去帮助你去实现你的职业规划。 切忌不要讲不合实际的,比如要在公司赚多少钱等等。 要根据公司的特点,找到切入点,只要讲得积极向上就可以。 二.…...
深度探索Kali Linux的精髓与实践应用
Kali Linux简介 Kali Linux作为全球网络安全领域的首选操作系统之一,其强大的功能性及广泛的适用范围令人瞩目。除了上述基础介绍外,让我们深入探究Kali Linux的几个关键特性及其在实际操作中的具体应用案例。 Kali工具集成:全面的安全工具…...
【在Linux世界中追寻伟大的One Piece】DNS与ICMP
目录 1 -> DNS(Domain Name System) 1.1 -> DNS背景 2 -> 域名简介 2.1 -> 域名解析过程 3 -> 使用dig工具分析DNS 4 -> ICMP协议 4.1 -> ICMP功能 4.2 -> ICMP报文格式 4.3 -> Ping命令 4.4 -> traceroute命令 1 -> DNS(Domain Na…...
信息安全工程师(41)VPN概述
前言 VPN,即Virtual Private Network(虚拟专用网络)的缩写,是一种通过公共网络(如互联网)创建私密连接的技术。 一、定义与工作原理 定义:VPN是依靠ISP(Internet Service Provider&…...
算法:双指针系列(一)
双指针系列 一、移动零(一)题目分析(二)代码展示二、复写零(一)题目分析(二)代码展示三、快乐数(一)题目分析(二)代码展示(…...
跟《经济学人》学英文:2024年09月28日这期 The curse of the Michelin star
The curse of the Michelin star Restaurants awarded the honour are more likely to close, research finds 原文: The twelve new restaurants added to the New York Michelin Guide this month, serving up cuisine ranging from “haute French” to “eco…...
Go 语言接口详解
Go 语言接口详解 核心概念 接口定义 在 Go 语言中,接口是一种抽象类型,它定义了一组方法的集合: // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的: // 矩形结构体…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
C# 表达式和运算符(求值顺序)
求值顺序 表达式可以由许多嵌套的子表达式构成。子表达式的求值顺序可以使表达式的最终值发生 变化。 例如,已知表达式3*52,依照子表达式的求值顺序,有两种可能的结果,如图9-3所示。 如果乘法先执行,结果是17。如果5…...
STM32---外部32.768K晶振(LSE)无法起振问题
晶振是否起振主要就检查两个1、晶振与MCU是否兼容;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容(CL)与匹配电容(CL1、CL2)的关系 2. 如何选择 CL1 和 CL…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10+pip3.10)
第一篇:Liunx环境下搭建PaddlePaddle 3.0基础环境(Liunx Centos8.5安装Python3.10pip3.10) 一:前言二:安装编译依赖二:安装Python3.10三:安装PIP3.10四:安装Paddlepaddle基础框架4.1…...
前端工具库lodash与lodash-es区别详解
lodash 和 lodash-es 是同一工具库的两个不同版本,核心功能完全一致,主要区别在于模块化格式和优化方式,适合不同的开发环境。以下是详细对比: 1. 模块化格式 lodash 使用 CommonJS 模块格式(require/module.exports&a…...
Linux入门课的思维导图
耗时两周,终于把慕课网上的Linux的基础入门课实操、总结完了! 第一次以Blog的形式做学习记录,过程很有意思,但也很耗时。 课程时长5h,涉及到很多专有名词,要去逐个查找,以前接触过的概念因为时…...
