《图解Vue3.0》- 调试

如何对vue3项目进行调试

调试是开发过程中必备的一项技能,掌握了这项技能,可以很好的定义bug所在。一般在开发vue3项目时,有三种方式。

  • 代码中添加debugger;
  • 使用浏览器调试:sourcemap需启用
  • vs code 调试:先开启node服务,后启用vs code的调试模式

具体使用如下:

debugger调试法

当打开开发者模式时才会起作用(F12), 但是使用完之后将其删除,不然遗留在代码中,不利于自己与他人开发。一般配置文件,也不允许其出现,.eslintrc.json, rules: "no-debugger":"error"

<template>
    <div>请求数据:{{ loginMsg }}</div>
    <button @click="loginBtn">点击获取mock数据</button>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import axios from 'axios';

const loginMsg = ref('');

const loginBtn = () => {
    debugger;
    axios.get('api/test').then((res) => {
        loginMsg.value = JSON.stringify(res);
    });
};

</script>
0a857ca33f3c1bd8be49393d3bd49cfc.png

浏览器调试法

在浏览器中调试是最常见的一种方式,即使部署了代码,只要将sourcemap打开(vite.config.ts->build->sourcemap: true,)即可。一般生产环境会将其关闭。

我们在开发vue3的时候, 如果借用浏览器调试的话,需要安装一个浏览器插件:vue developtools。

这里仅说明如何调试与vue3相关的,其他还有关于dom/css等相关的调试修改,不在此处赘述。

具体使用如下:

调试JS代码

找到source中的文件,提前打好断点,然后触发事件:

14492f1e58336624031487f7cc4a8696.png

调式vue3组件

如果想看vue3各个组件的prop,data,pinia数据等,这里就需要借用vue developtools插件了。在这里,我们也可以对components中的数据进行修改,也会触发界面的重新渲染。

ea5b0414dd9ca0c088fd5137c35608cb.png

vs code调试法

→ 启动项目服务
→ 启动vs code调试(F5)
→ Wab App(Chrome)
→ 修改配置文件, launch.json这里的url里面的端口,就是启动服务的端口

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            "sourceMaps": true,
        }
    ]
}

→ F5, 启动调试
这时会重新打开一个浏览器并打开当前的服务。

→ 在vs code中打断点,在浏览器中使用触发事件。

40fbfff1d80c7b5c5af05ef00f09c169.png

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/521214.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

735.小行星碰撞

题目&#xff1a;给定一个整数数组 asteroids&#xff0c;表示在同一行的小行星。 对于数组中的每一个元素&#xff0c;其绝对值表示小行星的大小&#xff0c;正负表示小行星的移动方向&#xff08;正表示向右移动&#xff0c;负表示向左移动&#xff09;。每一颗小行星以相同…

【智能排班系统】雪花算法生成分布式ID

文章目录 雪花算法介绍起源与命名基本原理与结构优势与特点应用场景 代码实现代码结构自定义机器标识RandomWorkIdChooseLocalRedisWorkIdChooselua脚本 实体类SnowflakeIdInfoWorkCenterInfo 雪花算法类配置类雪花算法工具类 说明 雪花算法介绍 在复杂而庞大的分布式系统中&a…

Pnpm + Turbo 搭建 Web Component Monorepo 组件库

技术选型 使用 Pnpm Turbo 搭建 Web Component Monorepo项目 stencil-component-ui 组件库 pnpm 作为包管理器Turborepo 作为构建系统Vitepress 管理文档 pnpm 技术 什么是 pnpm? 它有哪些优势&#xff1f; pnpm 跟 npm、yarn一样&#xff0c;都是用于管理Node包依赖的管…

构建连接世界的高校海外系统:功能架构解析与思考

随着全球化的深入发展&#xff0c;越来越多的高校开始面向海外拓展&#xff0c;建立起跨国合作与交流的桥梁。而为了更好地管理和服务海外学生、教职员工以及校友&#xff0c;高校海外系统的功能架构显得尤为重要。本文将深入探讨高校海外系统的功能架构设计&#xff0c;以及如…

免注册,ChatGPT可即时访问了!

AI又有啥进展&#xff1f;一起看看吧 Apple进军个人家用机器人 Apple在放弃自动驾驶汽车项目并推出混合现实头显后&#xff0c;正在进军个人机器人领域&#xff0c;处于开发家用环境机器人的早期阶段 报告中提到了两种可能的机器人设计。一种是移动机器人&#xff0c;可以跟…

【STM32】存储器和位带映射(bit band mapping)

文章目录 0 前言1 关于地址和存储器2 STM32内部存储器3 位带映射&#xff08;bit band mapping&#xff09;4 扩展&#xff1a;IAP 0 前言 最近在研究stm32标准库&#xff0c;对使用宏定义实现位操作的函数非常感兴趣&#xff0c;简单的一句PAout(1) 0;就能实现某个引脚电平的…

lua学习笔记7(函数的学习)

print("*****************************函数的学习*******************************") print("*****************************无参数无返回值函数的学习*******************************") function f1()print("f1函数") end f1() f2function()--…

隐私计算实训营学习九:隐语多方安全计算在安全核对的行业实践

文章目录 一、业务背景&#xff1a;安全核对产生的土壤二、产品方案&#xff1a;从试点到规模化的路三、技术共建&#xff1a;与隐语的共同成长 一、业务背景&#xff1a;安全核对产生的土壤 业务背景&#xff1a;很多粗放使用数据的方式被新出台的法律法规所规范&#xff0c;…

【RISC-V 指令集】RISC-V 向量V扩展指令集介绍(七)- 向量算术指令格式

1. 引言 以下是《riscv-v-spec-1.0.pdf》文档的关键内容&#xff1a; 这是一份关于向量扩展的详细技术文档&#xff0c;内容覆盖了向量指令集的多个关键方面&#xff0c;如向量寄存器状态映射、向量指令格式、向量加载和存储操作、向量内存对齐约束、向量内存一致性模型、向量…

【unity】【C#】延时调用(协程)和场景管理

文章目录 什么是协程协程的应用 - IEnumerator如何控制协程的暂停协程的另一种写法 - Invoke场景管理 多看代码块中的注释 什么是协程 A coroutine alows vou to spreacwhere it left off on the following anc return control toolinencoeframe. 协程允许您将任务分布在多个帧…

拦截器抛出异常无法被全局异常处理器捕获问题

文章目录 基本说明问题描述问题原因解决方法前端执行的所有请求都通过Controller&#xff0c;而不是直接访问html定义一个/error路径的方法 总结 基本说明 我的前后端项目是放在一起的&#xff0c;前后端都是由springMVC进行控制&#xff0c;但是现在我在拦截器的preHandle方法…

HAL STM32主从定时器联级使用

HAL STM32主从定时器联级使用 具体介绍参考STM32参考手册 &#x1f33f;主从定时器联级&#xff1a;使用一个定时器作为另一个定时器的预分频器。 &#x1f341;时钟关系&#xff1a; &#x1f33f;TIM1 和TIM8 控制寄存器 2(TIMx_CR2)相关位&#xff1a; &#x1f516;主…

Redis性能管理及主从复制、哨兵的配置与部署

一、redis性能管理 1.1 查看Redis内存使用 1.2 内存碎片率 1.3 内存使用率 1.3.1 避免内存交换发生的方法 1.4 内回收key 1.4.1 配置文件中修改 maxmemory-policy 属性值 1.5 缓存穿透 1.5.1 原因 1.5.2 条件 1.5.3 解决方案 1.6 缓存击穿 1.6.1 原因 1.6.2 现象…

移位运算与乘法

描述 题目描述&#xff1a; 已知d为一个8位数&#xff0c;请在每个时钟周期分别输出该数乘1/3/7/8,并输出一个信号通知此时刻输入的d有效&#xff08;d给出的信号的上升沿表示写入有效&#xff09; 信号示意图&#xff1a; 波形示意图&#xff1a; 输入描述&#…

Leetcode 215. 数组中的第K个最大元素

心路历程&#xff1a; 这道题本质上是排序不完全的过程&#xff0c;而且这道题有bug&#xff0c;直接用python的排序算法其实就能AC。 可以按照快排排到找到k-1个large元素的思维去做&#xff0c;不过这道题需要考虑空间复杂度&#xff0c;所以需要用指针快排。 其实也可以考虑…

SUPS:一种用于自动驾驶的仿真地下泊车场景数据集

SUPS&#xff1a;一种用于自动驾驶的仿真地下泊车场景数据集 附赠自动驾驶学习资料和量产经验&#xff1a;链接 摘要 本文介绍了SUPS&#xff1a;一种用于自动驾驶的仿真地下泊车场景数据集。随着自动驾驶的范围扩大&#xff0c;自动地下泊车引起了人们极大的关注。自动驾驶汽…

【stm32】软件I2C读写MPU6050

软件I2C读写MPU6050(文章最后附上源码) 编码 概况 首先建立通信层的.c和.h模块 在通信层里写好I2C底层的GPIO初始化 以及6个时序基本单元 起始、终值、发送一个字节、接收一个字节、发送应答、接收应答 写好I2C通信层之后&#xff0c;再建立MPU6050的.c和.h模块 基于I2C通…

京东云幻兽帕鲁4核16G服务器优惠价格26元1个月、398元一年

京东云幻兽帕鲁4核16G服务器优惠价格26元1个月、658元1年、三年3098元&#xff0c;配置为&#xff1a;轻量云主机4C16G-100G SSD系统盘-5M带宽-1000G月流量 华北-北京&#xff0c;京东云优惠活动 yunfuwuqiba.com/go/jd 活动链接打开如下图&#xff1a; 幻兽帕鲁4核16G服务器优…

计算机网络-TCP重传、滑动窗口、流量控制、拥塞控制

重传机制 超时重传&#xff1a;超时重传时间&#xff08;RTO&#xff09;设定为略大于RTT&#xff08;动态&#xff09;。触发场景包括自己发送的数据包丢失和别人给自己的回应数据包丢失。启动重传机制后如果还没有收到数据包&#xff0c;则RTO设置为上次的两倍&#xff0c;直…

双连通分量算法

1. 连通图概念 连通图&#xff1a;无向图任意两点之间存在通路。 强连通&#xff1a;有向图&#xff08;前提&#xff09;中&#xff0c;任意两点都有至少一条通路&#xff0c;则此图为强连通图。 弱连通图&#xff1a;将有向图的有向边换成无向边得到的图是连通图&#xff0c…