当前位置: 首页 > 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;使用…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

MODBUS TCP转CANopen 技术赋能高效协同作业

在现代工业自动化领域&#xff0c;MODBUS TCP和CANopen两种通讯协议因其稳定性和高效性被广泛应用于各种设备和系统中。而随着科技的不断进步&#xff0c;这两种通讯协议也正在被逐步融合&#xff0c;形成了一种新型的通讯方式——开疆智能MODBUS TCP转CANopen网关KJ-TCPC-CANP…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

Java + Spring Boot + Mybatis 实现批量插入

在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法&#xff1a;使用 MyBatis 的 <foreach> 标签和批处理模式&#xff08;ExecutorType.BATCH&#xff09;。 方法一&#xff1a;使用 XML 的 <foreach> 标签&#xff…...

算法:模拟

1.替换所有的问号 1576. 替换所有的问号 - 力扣&#xff08;LeetCode&#xff09; ​遍历字符串​&#xff1a;通过外层循环逐一检查每个字符。​遇到 ? 时处理​&#xff1a; 内层循环遍历小写字母&#xff08;a 到 z&#xff09;。对每个字母检查是否满足&#xff1a; ​与…...

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变(硬件篇)

本项目是基于 STM32F103C8T6 微控制器的 SPWM(正弦脉宽调制)电源模块,能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路,图中 D1 为二极管, 其目的是防止正负极电源反接, …...

jmeter聚合报告中参数详解

sample、average、min、max、90%line、95%line,99%line、Error错误率、吞吐量Thoughput、KB/sec每秒传输的数据量 sample&#xff08;样本数&#xff09; 表示测试中发送的请求数量&#xff0c;即测试执行了多少次请求。 单位&#xff0c;以个或者次数表示。 示例&#xff1a;…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...