VSCode如何设置Vue前端的debug调试

vscode在调试vue.代码时,如何进行debug?

1.安装Chrome Debug插件。

clipboard

2.在launch.json中,将url修改成你前端项目的路径:

clipboard

  1 {
  2   // Use IntelliSense to learn about possible attributes.
  3   // Hover to view descriptions of existing attributes.
  4   // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  5   "version": "0.2.0",
  6   "configurations": [
  7     {
  8       "type": "chrome",
  9       "request": "launch",
 10       "name": "Chrome 调试",
 11       "url": "http://localhost:8090/#/login",
 12       "webRoot": "${workspaceFolder}/src",
 13       "breakOnLoad": false,
 14       "sourceMapPathOverrides": {
 15         "webpack:///src/*": "${webRoot}/*"
 16       }
 17     }
 18   ]
 19 }

3.vue-cli2版本的,修改config/index.js中配置:

clipboard

完成以上配置,重启项目,打上断点即可。

clipboard

clipboard

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

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

相关文章

腾讯再推互动微短剧,游戏的风吹向了短剧

当你看剧时不再拥有上帝视角,处在女主的位置上,你又会做出什么样的选择? 腾讯最新上线的短剧《摩玉玄奇2》在原版之外还推出了互动版,就给出了这样一个新玩法。 《摩玉玄奇2》原版是普通的后宫职场微短剧,互动版则是…

Linux——缓冲区与实现C库的fopen,fwrite,fclose

目录 一.缓冲区 1缓冲区的概念 2.缓冲区存在的意义 3.缓冲区刷新策略 4.什么是刷新? C语言的缓冲区在哪里? ​编辑 仿写C库里的fopen,fclose,fwrite。 mystdio.h mystdio.c main.c(向文件中写入20次msg) 一.缓冲区 1…

protobuf安装教程v21.11

Linux: 1.安装依赖库 下载ProtoBuf前⼀定要安装依赖库:autoconf automake libtool curl make g unzip如未安装,安装命令如下: Ubuntu用户: sudo apt-get install autoconf automake libtool curl make g unzip -y CentOS用户&…

盘点251个Python源码Python爱好者不容错过

盘点251个Python源码Python爱好者不容错过 学习知识费力气,收集整理更不易。 知识付费甚欢喜,为咱码农谋福利。 项目名称 链接:https://pan.baidu.com/s/1PikCn61NfHXmEzQiny8kfw?pwd6666 提取码:6666 dailyfreshpython-Dj…

MongoDB中的sort()排序方法、aggregate()聚合方法和索引

本文主要介绍MongoDB中的sort()排序方法、aggregate()聚合方法和索引。 目录 MongoDB的sort()排序方法MongoDB的aggregate()聚合方法MongoDB的索引 MongoDB的sort()排序方法 在MongoDB中,sort()方法是用来对查询结果进行排序的。sort()方法可以用于在查询语句中对指…

[NAND Flash] 1.1 闪存(NAND Flash) 学习指南

依公知及经验整理,原创保护,禁止转载。 专栏 《深入理解NAND Flash》 ​ 回首 漠然回首,从事存储芯片行业已多年,这些年宝贵的青春都献给了闪存。 我刚入行的时候,也是萌新一个,彷佛大学学的都没有和这相…

docker安装部署

1.在线安装Docker 安装Docker依赖库: yum install -y yum-utils device-mapper-persistent-data lvm2添加yum来源: yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo安装Docker: yum install doc…

[香橙派]orange pi zero 3 烧录Ubuntu系统镜像——无需HDMI数据线安装

一、前言 本文我们将介绍如何使用orange pi zero 3 安装Ubuntu系统,本文相关步骤均参考自开发手册。 二、实施准备 根据开发手册中所提到的,我们应该拥有如下配件: 1.orange pi zero 3 开发板 2.TF 卡——最小 8GB 容量的 class10 级或以上的高速闪迪卡。…

@德人合科技 | 数据透明加密防泄密系统\文件文档加密\设计图纸加密|源代码加密防泄密软件系统,——防止内部办公终端核心文件数据/资料外泄!

一款专业的数据防泄密管理系统,它采用了多种加密模式,包括透明加密、半透明加密和落地加密等,可以有效地保护企业的核心数据安全。 PC端访问地址: https://isite.baidu.com/site/wjz012xr/2eae091d-1b97-4276-90bc-6757c5dfedee …

c++新经典模板与泛型编程:标准库容器中元素类型的萃取

通过容器(数组)类型萃取元素类型 用GetEleType类模板进行常规实现 #include <iostream>#include <vector> #include <list>// 泛化版本 template<typename T> struct GetEleType;// 特化版本 template<typename T> struct GetEleType<std::v…

【rabbitMQ】模拟work queue,实现单个队列绑定多个消费者

上一篇&#xff1a; springboot整合rabbitMQ模拟简单收发消息 https://blog.csdn.net/m0_67930426/article/details/134904766?spm1001.2014.3001.5502 在这篇文章的基础上进行操作 基本思路&#xff1a; 1.在rabbitMQ控制台创建一个新的队列 2.在publisher服务中定义一个…

基于JAVA+SpringBoot+Vue的前后端分离的医院信息智能化HIS系统

✌全网粉丝20W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取项目下载方式&#x1f345; 一、项目背景介绍&#xff1a; 随着科技的不断发展&a…

2023.12.3 关于 Spring Boot 拦截器 和 过滤器

目录 引言 Spring 拦截器实现 实例理解 Spring 过滤器实现 实例理解 拦截器和过滤器的区别 出身不同 触发时机不同 底层实现不同 支持的项目类型不同 使用场景不同 引言 原生 Spring AOP 实现统一拦截有两个难点难点一&#xff1a;定义拦截规则表达式 难点二&#…

四. 基于环视Camera的BEV感知算法-DETR3D

目录 前言0. 简述1. 算法动机&开创性思路2. 主体结构3. 损失函数4. 性能对比总结下载链接参考 前言 自动驾驶之心推出的《国内首个BVE感知全栈系列学习教程》&#xff0c;链接。记录下个人学习笔记&#xff0c;仅供自己参考 本次课程我们来学习下课程第四章——基于环视Cam…

arm平台编译so文件回顾

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、几个点二、回顾过程 1.上来就执行Makefile2.编译第三方开源库.a文件 2.1 build.sh脚本2.2 Makefile3.最终编译三、其它知识点总结 前言 提示&#xff1a;这…

ES6中的继承,String类型方法的拓展

ES6中的继承&#xff1a; 主要是依赖extends关键字来实现继承&#xff0c;使用了extends实现继承不一定要constructor和super&#xff0c;因为没有的话会默认产生并调用它们。 在实现继承时&#xff0c;如果子类中有constructor函数&#xff0c;必须得在constructor中调用一下s…

我对迁移学习的一点理解——领域适应(系列3)

文章目录 1. 领域适应&#xff08;Domain Adaptation&#xff09;的基本概念2.领域适应&#xff08;Domain Adaptation&#xff09;的目标3.领域适应&#xff08;Domain Adaptation&#xff09;的实现方法4.领域适应&#xff08;Domain Adaptation&#xff09;的可以解决的问题…

javaScript(六):DOM操作

文章目录 1、DOM介绍2、DOM&#xff1a;获取Element对象3、DOM&#xff1a;事件监听3.1、事件介绍3.2、常见事件3.3、设置事件的两种方式3.4、事件案例 1、DOM介绍 概念 Document Object Model &#xff0c;文档对象模型 将标记语言的各个组成部分封装为对应的对象&#xff1a…

leetcode 100.相同的树

涉及到递归&#xff0c;最好多画图理解&#xff0c;希望对你们有帮助 100.相同的树 题目 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 题目链接…

一文掌握Ascend C孪生调试

1 What&#xff0c;什么是孪生调试 Ascend C提供孪生调试方法&#xff0c;即CPU域模拟NPU域的行为&#xff0c;相同的算子代码可以在CPU域调试精度&#xff0c;NPU域调试性能。孪生调试的整体方案如下&#xff1a;开发者通过调用Ascend C类库编写Ascend C算子kernel侧源码&am…