vscode vite+vue3项目启动调试

1、经常我们在普通的项目中,如果算法并不复杂,那么基本上console.log就可以搞定,当然也可以直接alert,打包的时候如果不去掉,还会在发版中上接弹出,给你个惊喜。

2、碰到了有些算法过程比较复杂的情况下,console.log就有些吃力了,那我们就要开启debug模式,那么可能我们都会碰到问题,解决的方式可能是一样的,一般我们的环境不可能是一样,但是基本上类似。

3、网上的方法很多,可能试了半天,没有管用的,下面我们来启用调试,及碰到的问题解决:

先上个成功进入断点调试的截图:

这样就表示成功了,一开始的效果,可不是这样的,下面是一开始的失败的截图,调不调试都不能进入断点:

未绑定断点的提示,也就是说压根就没有连上这个调试,也没有找到这个断点。【对启动配制进行故障排除】这个项,我们点一下,然后出现如下 :

意思是找不到源的位置,所以没法调试。

4、上面的提示,让我们怀疑是不是设置有问题,那么我们来看一下设置:

我们找到这个位置的文件,然后删除,当然启用了调试才会有这个文件。

5、我们再切换到调试页,就会发现没有启用调试的效果:

6、我们点击【运行与调试】,会出来一个菜单 :

我们选择第一项【Web 应用 (Chrome)】,然后会生成一个launch.json文件,并且已经打开了:

name:  就是显示在下拉菜单中选择的启动命令的名字,url:是要调试的地址:

name:可以不动,就用针对localhost 启用 Chrome,这个不影响,可以不修改,当然你也可以修改一个自己喜欢的。

url: 这个一定要修改一下端口,与你的项目一致,可能是5173,也可能是3100等等,看你项目运行以后的端口就知道,下面我们来看一下运行:

然后我们发现是5173,那么我们就改成5173就行。注意:这里是http,并没有启用https。

7、修改好的launch.json:

8、然后我们来启用调试(一定要先启动项目):

点击开始调试(F5) 按钮,我们发现会弹一个chrome浏览器出来,但是中间的单步运行按钮全是灰的,并且左上角在转圈,这显然是没有连上。

9、我们来解决这个连不上的问题:

1)调试要安装Javascript Debugger:

2)安装Nightly这个,先点击【安装】按钮,我们进行安装。

这样就安装好了。

3)重启vscode, 再 启动项目 ,再运行调试。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何给openshift 单节点集群配置hugepage

目前我有一台arm服务器, 是配置的单节点集群, 这个节点为是master, 也是worker. 理论上我应该用worker 标签给node 配置hugepage. 所以使用了以下方法: cat << EOF > hugepageconfig.yaml apiVersion: machineconfiguration.openshift.io/v1 kind: MachineCo…

Jdbc学习笔记(三)--PreparedStatement对象、sql攻击(安全问题)

目录 &#xff08;一&#xff09;使用PreparedStatement对象的原因&#xff1a; 使用Statement对象编写sql语句会遇到的问题 ​编辑 &#xff08;二&#xff09;sql攻击 1.什么是sql攻击 2.演示sql攻击 &#xff08;三&#xff09;防止SQL攻击 1.PreparedStatement是什么 …

java导出pdf

引入包 <properties><itext.version>8.0.5</itext.version></properties><dependencies><dependency><groupId>com.itextpdf</groupId><artifactId>itext-core</artifactId><version>${itext.version}</…

C/C++基础知识复习(23)

) 什么是 C 内联函数&#xff1f;它的作用是什么&#xff1f; C 内联函数&#xff08;inline function&#xff09; 是一种通过编译器优化的特殊函数。内联函数的主要作用是减少函数调用的开销&#xff0c;使得程序执行更加高效&#xff0c;尤其是对于那些频繁调用的函数。 当…

表单自动化填写-JavaScript脚本

一、场景 在日常工作、生活中常常会遇到需要填写、提交web表单的场景&#xff0c;往往涉及到了大量机械、重复的工作。作为程序员&#xff0c;我们崇尚消除重复、实现流程自动化、合理偷懒。 通过浏览器的控制台运行JavaScript脚本&#xff0c;可以简单的实现对web表单的填写…

后端分层解耦

引入 在上篇所举的例子中&#xff0c;我们将所有的代码均放在HelloControl方法之中&#xff0c;这样会导致代码的复用性、可读性较差&#xff0c;难以维护。因此我们需 三层架构 在之前的代码中&#xff0c;代码大体可以分为三部分&#xff1a;数据访问、数据逻辑处理、响应数…

97.【C语言】数据结构之栈

目录 栈 1.基本概念 2.提炼要点 3.概念选择题 4.栈的实现 栈初始化函数 入栈函数 出栈函数和栈顶函数 栈顶函数 栈销毁函数 栈 基本概念参见王爽老师的《汇编语言 第四版》第56和57页 节选一部分 1.基本概念 注意:这里提到的数据结构中的栈有别于操作系统的栈,后者是…

初识算法 · 模拟(1)

目录 前言&#xff1a; 替换所有的问号 题目解析 算法原理 算法编写 提莫攻击 题目解析 算法原理 算法编写 外观数列 题目解析 算法原理 算法编写 前言&#xff1a; ​本文的主题是模拟&#xff0c;通过三道题目讲解&#xff0c;一道是提莫攻击&#xff0c;一道是…

Controller Baseband commands速览

目录 一、设备连接与通信控制类&#xff08;34条&#xff09; 1.1. 连接参数相关 1.1.1. 连接建立超时设置 1.1.2. 链路监督超时设置 1.1.3. Page操作超时设置 1.1.4. 扩展Page操作超时设置 1.1.5. 安全连接主机支持 1.2. 扫描操作相关 1.2.1. 扫描启用与禁用 1.2.2.…

【数值分析】高斯-赛德尔方法、规范化幂法、原点移位法

【数值分析】高斯-赛德尔方法、规范化幂法、原点移位法 题目 要求 代码实现过程不能调用任何库函数自带的“线性 方程组求解、特征值求解库函数” 利用高斯-赛德尔方法求解上述线性方程组 使用Python编程求解矩阵A与列向量b import numpy as np import sympy as spdef crea…

【CUDA】了解GPU架构

目录 一、初步认识 二、Fermi架构 三、Kepler 架构 3.1 动态并行 3.2 Hyper-Q 一、初步认识 SM&#xff08;Streaming Multiprocessors&#xff09;是GPU架构中非常重要的部分&#xff0c;GPU硬件的并行性就是由SM决定的。以Fermi架构为例&#xff0c;其包含以下主要组成…

64位程序调用32位dll解决方案

最近在做64位代码移植&#xff0c;发现很多老代码使用到了第三方的32位dll;而且这些第三方32位dll库已经年代久远&#xff0c;原开发商已不再了&#xff1b;所以急切的需要在64位主程序 中使用老的32位dll;查询很多解决方案 发现目前只有使用com 进程外组件的方法可以解决此问题…

【HOT100第五天】搜索二维矩阵 II,相交链表,反转链表,回文链表

240.搜索二维矩阵 II 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target 。该矩阵具有以下特性&#xff1a; 每行的元素从左到右升序排列。每列的元素从上到下升序排列。 先动手写写最简单方法&#xff0c;二重循环。 class Solution { public:bool searchMa…

模板元函数应用:输出字符串。

看下面三个字符串&#xff0c;s1,s2,s3 &#xff1a; string s1 "逆天邪神";wstring s2 _t("焚星妖莲");_string s3 "焚绝尘"; 在控制台输出字符串&#xff0c;可能的一个方案是&#xff1a; void print_test(const wstring& s) {std::…

pytest | 框架的简单使用

这里写目录标题 单个文件测试方法执行测试套件的子集测试名称的子字符串根据应用的标记进行选择 其他常见的测试命令 pytest框架的使用示例 pytest将运行当前目录及其子目录中test_*.py或 *_test.py 形式的所有 文件 文件内的函数名称可以test* 或者test_* 开头 单个文件测试…

【C++】类和对象-深度剖析默认成员函数-上

> &#x1f343; 本系列为初阶C的内容&#xff0c;如果感兴趣&#xff0c;欢迎订阅&#x1f6a9; > &#x1f38a;个人主页:[小编的个人主页])小编的个人主页 > &#x1f380; &#x1f389;欢迎大家点赞&#x1f44d;收藏⭐文章 > ✌️ &#x1f91e; &#x1…

Web性能优化:从基础到高级

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 Web性能优化&#xff1a;从基础到高级 Web性能优化&#xff1a;从基础到高级 Web性能优化&#xff1a;从基础到高级 引言 基础优…

当 docker-compose.yaml 文件部署时,Dify 线上版本升级过程

如果线上 Dify 是通过 docker-compose.yaml 文件部署的&#xff0c;那么当 Dify 版本升级时该如何操作呢&#xff1f;官方已经给出了 Docker compose 和 Source Code 两种方式。相对而言&#xff0c;前者更简单些&#xff0c;至少不需要安装依赖包和迁移数据库文件。为了更加具…

如何让手机ip变成动态

在数字化浪潮中&#xff0c;手机已成为我们日常生活中不可或缺的一部分。无论是浏览网页、使用社交媒体还是进行在线购物&#xff0c;手机都扮演着举足轻重的角色。然而&#xff0c;在享受网络带来的便利时&#xff0c;我们也需要关注网络安全和隐私保护。静态IP地址可能让手机…

elementPlus + table 树形懒加载,子节点的刷新

文章目录 需求描述技术细节小结 需求描述 一个树形表格的增删查改 技术细节 刚开始想的很好&#xff0c;新增/编辑/删除时不调用接口&#xff0c;而是直接更改数据&#xff0c;如删除时&#xff0c;直接删除对应下标的数据 遇到的问题 实际业务中是否有子级&#xff0c;是不…