当前位置: 首页 > news >正文

小程序基础 —— 10 如何调试小程序代码

如何调试小程序代码

在进行项目开发的时候,不可避免需要进行调试,那么如何调试小程序呢?

打开微信开发者工具后,有一个模拟器,通过模拟器能够实时预览自己写的页面,如下:

在这里插入图片描述
在上部工具栏中有一个调试器按钮,点击该按钮,在底部就会弹出一个调试器,如下:

在这里插入图片描述
在下部调试器中,有很多功能项,这里讲解一下常用的选项:

  • Wxml:能够看到当前页面的结构和样式,通过这个面板能够调试结构和样式;
  • Console:通过 Console 能够看到 JS 打印输出的内容;在 Console 中有一些系统打印信息,系统打印信息会影响开发者自己打印的信息,这样不方便开发者调试。可以右键点击系统打印信息,选择【Hide messages from WAServiceMainContext.js】隐藏系统打印信息,如下:
    在这里插入图片描述
  • Network:通过 Network 可以调试网络请求,即调试自己向服务器发送的请求;
  • AppData:通过 AppData 可以查看当前页面定义了哪些数据;
  • Storgae:通过 Storage 可以查看我们在本地存储了哪些数据;

接下来看一下工具栏中的四个功能:编译、预览、真机调试、清缓存 这个四个功能:

在这里插入图片描述

  • 编译:有点类似于浏览器的刷新,在点击之后能够重新刷新当前页面,当我们编写代码之后发现模拟器没有任何变化时,就可以点击编译进行刷新;

  • 预览:点击预览之后会弹出一个弹框,点击弹框下部的【继续浏览小程序】:
    在这里插入图片描述
    点击之后会弹出一个二维码,我们使用自己的手机扫描二维码:
    在这里插入图片描述
    扫描二维码之后,在手机上就能看到模拟器上的内容,点击手机微信顶部的【…】,选择弹出框最右侧的【开发调试】:
    在这里插入图片描述
    点击【开发调试】,会有一个新的弹框,选择弹框中的【打开调试】,微信会关闭当前界面,然后我们需要重新扫描开发者工具中的二维码:
    在这里插入图片描述
    重新扫描二维码之后,我们就可以在自己的手机上对小程序进行一些调试工作;

    如果希望关闭调试,同样是点击顶部右侧的【…】,在下侧弹出框中选择最右边的【开发调试】,在【开发调试】弹框中选择【关闭调试】即可;

  • 真机调试:点击真机调试之后,会弹出一个二维码:
    在这里插入图片描述
    用手机微信扫描这个二维码,在扫描二维码之后,开发者模式中会弹出一个新的【真机调试】窗口,如下:
    在这里插入图片描述
    我们可以在【真机调试】面板中选择不同的功能获取信息,比如 Wxml、Console 等功能,其功能和我们上面介绍的一样;当我们在真机中发送请求之后,在 【Network】部分就能看到我们在真机中发送的请求信息,这里主要是为了方便真机调试;

    预览和真机调试的区别在于,真机调试会弹出一个调试器窗口;

  • 清缓存:微信开发者工具缓存非常严重,当我们写好代码后,发现模拟器的效果与代码预期不符,当点击【编译】刷新之后发现效果还是不一致,这时候我们可以选择【清缓存】。但需要注意,在点击【清缓存】后,模拟器还是没有实现代码预期效果,这时候需要点击左侧顶部的【项目】按钮,选择【重新打开此项目】,然后再观看模拟器是否符合代码预期:在这里插入图片描述
    参考视频:尚硅谷微信小程序开发教程

相关文章:

小程序基础 —— 10 如何调试小程序代码

如何调试小程序代码 在进行项目开发的时候,不可避免需要进行调试,那么如何调试小程序呢? 打开微信开发者工具后,有一个模拟器,通过模拟器能够实时预览自己写的页面,如下: 在上部工具栏中有一个…...

Vue项目如何设置多个静态文件;如何自定义静态文件目录

Vite实现方案 安装插件 npm i vite-plugin-static-copy在vite.config.ts引入 import { viteStaticCopy } from vite-plugin-static-copy配置 plugins: [viteStaticCopy({targets: [{src: "要设置的静态文件目录的相对路径 相对于vite.config.ts的", dest: ./, // …...

CentOS Stream 9 安装 JDK

安装前检查 java --version注:此时说明已安装过JDK,否则为未安装。如若已安装过JDK可以跳过安装步骤直接使用,或者先卸载已安装的JDK版本重新安装。 安装JDK 官网下载地址:https://www.oracle.com/java/technologies/downloads…...

前端(htmlcss)

前端页面 Web页面 PC端程序页面 移动端APP页面 ... HTML页面 HTML超文本标记页面 超文本:文本,声音,图片,视频,表格,链接 标记:由许多标签组成 HTML页面运行到浏览器上面 vscode便捷插件使用 vs…...

py打包工具

pyinstaller 安装 大佬文档参考 pip install pyinstallerpyinstaller 参数 -i 给应用程序添加图标 -F 只生成一个exe格式的文件 -D 创建一个目录,包含exe文件,但会依赖很多文件(默认选项) -c 有黑窗口 -w 去掉黑窗口pyinstalle…...

华为OD E卷(100分)39-最长子字符串的长度(二)

前言 工作了十几年,从普通的研发工程师一路成长为研发经理、研发总监。临近40岁,本想辞职后换一个相对稳定的工作环境一直干到老, 没想到离职后三个多月了还没找到工作,愁肠百结。为了让自己有点事情做,也算提高一下自己的编程能力…...

Selenium+Java(21):Jenkins发送邮件报错Not sent to the following valid addresses解决方案

问题现象 小月妹妹近期在做RobotFrameWork自动化测试,并且使用Jenkins发送测试邮件的时候,发现报错Not sent to the following valid addresses,明明各个配置项看起来都没有问题,但是一到邮件发送环节,就是发送不出去,而且还不提示太多有用的信息,急的妹妹脸都红了,于…...

JSON结构快捷转XML结构API集成指南

JSON结构快捷转XML结构API集成指南 引言 在当今的软件开发世界中,数据交换格式的选择对于系统的互操作性和效率至关重要。JSON(JavaScript Object Notation)和XML(eXtensible Markup Language)是两种广泛使用的数据表…...

【视觉惯性SLAM:四、相机成像模型】

相机成像模型介绍 相机成像模型是计算机视觉和图像处理中的核心内容,它描述了真实三维世界如何通过相机映射到二维图像平面。相机成像模型通常包括针孔相机的基本成像原理、数学模型,以及在实际应用中如何处理相机的各种畸变现象。 一、针孔相机成像原…...

网络编程:TCP和UDP通信基础

TCP 简易服务器&#xff1a; #include<myhead.h>int main(int argc, const char *argv[]) {int oldfd socket(AF_INET,SOCK_STREAM,0);if(oldfd -1){perror("socket");return -1;}//绑定要绑定的结构体struct sockaddr_in server {.sin_family AF_INET,.…...

声波配网原理及使用python简单的示例

将自定义的信息内容&#xff08;如Wi-Fi配置、数字数据&#xff09;转换为音波是一种音频调制与解调技术&#xff0c;广泛应用于声波配网、数据传输和近场通信中。这项技术的实现涉及将数字信息编码为音频信号&#xff0c;并通过解码还原信息。 实现方法 1. 数字数据编码 将原…...

深度学习任务中的 `ulimit` 设置优化指南

深度学习任务中的 ulimit 设置优化指南 1. 什么是 ulimit&#xff1f;2. 深度学习任务中的关键 ulimit 设置2.1 max locked memory&#xff08;-l&#xff09;2.2 open files&#xff08;-n&#xff09;2.3 core file size&#xff08;-c&#xff09;2.4 stack size&#xff08…...

【学生管理系统】权限管理

目录 6.4 权限管理&#xff08;菜单管理&#xff09; 6.4.1 查询所有&#xff08;含孩子&#xff09; 6.4.2 添加权限 6.4.3 核心3&#xff1a;查询登录用户的权限&#xff0c;并绘制菜单 6.4 权限管理&#xff08;菜单管理&#xff09; 6.4.1 查询所有&#xff08;含孩子…...

Java编程题_面向对象和常用API01_B级

Java编程题_面向对象和常用API01_B级 第1题 面向对象、异常、集合、IO 题干: 请编写程序&#xff0c;完成键盘录入学生信息&#xff0c;并计算总分将学生信息与总分一同写入文本文件 需求&#xff1a;键盘录入3个学生信息(姓名,语文成绩,数学成绩) 求出每个学生的总分 ,并…...

JUC并发工具---线程协作

信号量能被FixedThreadPool代替吗 Semaphore信号量 控制需要限制访问量的资源&#xff0c;没有获取到信号量的线程会被阻塞 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.util.concurrent.Semaphore;public class Sem…...

Excel for Finance 08 `XNPV`和`XIRR` 函数

Excel 的 XNPV 函数用于计算基于特定日期的净现值&#xff08;Net Present Value, NPV&#xff09;。与标准的 NPV 函数相比&#xff0c;XNPV 更灵活&#xff0c;可以考虑不规则的现金流间隔&#xff0c;而不仅限于等间隔的期数。 语法&#xff1a; XNPV(rate, values, dates)…...

嵌入式入门Day35

网络编程 Day2 套接字socket基于TCP通信的流程服务器端客户端TCP通信API 基于UDP通信的流程服务器端客户端 作业 套接字socket socket套接字本质是一个特殊的文件&#xff0c;在原始的Linux中&#xff0c;它和管道&#xff0c;消息队列&#xff0c;共享内存&#xff0c;信号等…...

AE/PR/达芬奇模板:自动光标打字机文字标题移动效果动画模板预设

适用于AE/PR/达芬奇的 Typewriter Pro 该模板包括专业的打字机文本动画&#xff0c;并包含很酷的功能&#xff0c;以及帮助文档和分步画外音视频教程。 主要特点 轻松的持续时间控制您可以通过在持续时间控件中输入 start 和 end duration&#xff08;开始和结束持续时间&…...

RCE漏洞

一、课程知识点 1、远程代码执行漏洞原理与利用 2、常见的代码执行函数 3、常见的命令执行函数 4、常见的绕过姿势 5、命令执行漏洞防范 二、技术目标 1、掌握命令执行漏洞的原理 2、掌握 PHP 命令执行和代码执行的相关函数 3、掌握常见的绕过姿势 4、掌握代码执行漏洞防御措施…...

在开发嵌入式系统时,尤其是处理大数时,会遇到取值范围的问题。51单片机通常没有内建大整数支持,因此我们需要采用不同的方法来解决这一问题

00 两种可行方法分别是&#xff1a; 使用数组存储每一位数据并进行进位运算&#xff1a;通过将大数按位拆分成数组&#xff0c;然后实现逐位加法、进位等操作。使用符号变量进行计算&#xff1a;将数值分成低位和高位&#xff0c;分别用符号变量进行计算。 01&#xff1a;使用…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

佰力博科技与您探讨热释电测量的几种方法

热释电的测量主要涉及热释电系数的测定&#xff0c;这是表征热释电材料性能的重要参数。热释电系数的测量方法主要包括静态法、动态法和积分电荷法。其中&#xff0c;积分电荷法最为常用&#xff0c;其原理是通过测量在电容器上积累的热释电电荷&#xff0c;从而确定热释电系数…...

保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek

文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama&#xff08;有网络的电脑&#xff09;2.2.3 安装Ollama&#xff08;无网络的电脑&#xff09;2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...