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

VScode断点调试vue

VScode断点调试vue

1、修改launch.js文件(没有这个文件就新建)。

{// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387"version": "0.2.0","configurations": [{"type": "chrome", //调试的环境"request": "launch", //调试模式:启动类型"name": "vue", // 自定义调试名称"url": "http://localhost:80", //调试的服务地址,需要和devServer对应"webRoot": "${workspaceFolder}/src", //调试的根路径为src业务目录下"breakOnLoad": true,"sourceMapPathOverrides": { //指定生成的sourceMap路径,参考浏览器生成的 .目录和src目录// "webpack:///src/*": "${webRoot}/*",// "webpack:///./src/*": "${webRoot}/*""webpack:///./*": "${webRoot}/*","webpack:///src/*": "${webRoot}/*",// "webpack:///./src/*": "${webRoot}/*", // 该行代码存在时,会出现vue文件断点定位错位的问题,但可正常使用js文件的断点调试"webpack:///*": "*","webpack:///./~/*": "${webRoot}/node_modules/*","meteor:///app/*": "${webRoot}/*"}},]
}

2、修改vue.config.js文件


configureWebpack: (config) => {config.devtool = 'source-map';
},
或
configureWebpack:{devtool:'source-map'

3、修改babel.config.js 文件

'env': {'development': {"sourceMaps": true, // 关键是这两行"retainLines": true, // 关键是这两行}}

4、启vscode,即可进行vue的断点调试

5、操作界面(首先启动项目,然后操作下图步骤,然后会打开新浏览器界面再次操作新弹出界面就会进入预先设置的断点,至此成功使用vscode调试vue)

在这里插入图片描述

相关文章:

VScode断点调试vue

VScode断点调试vue 1、修改launch.js文件(没有这个文件就新建)。 {// Use IntelliSense to learn about possible attributes.// Hover to view descriptions of existing attributes.// For more information, visit: https://go.microsoft.com/fwlin…...

20吨屠宰鸡鸭鹅一体化污水处理设备加工厂家

20吨屠宰鸡鸭鹅一体化污水处理设备加工厂家 溶气气浮机主要构造说明 气浮系统气浮系统集进水、絮凝、分离、集水、出水于一体,与传统气浮设备类似,设有一个稳流室、溶气释放室,使处理性能更稳定,效果更优越。 稳定室:通…...

android被杀以后fragments缓存重建问题和测试方法

这个问题,其实不是太好复现。因为在android的缓存Fragment机制是写在androidx的库中。 主要的原因是android Framework机制: framework at yourpackage.onSaveInstanceState(XXXActivity.kt:118) at android.app.Activity.performSaveInstanceState(A…...

Visual Studio 2017 安装

C自学精简实践教程 目录(必读) 这篇文章会保证你第一次安装VS2017就成功运行Hello World! 下载Visual Studio Installer Gitee 下载 VS2017/vs2017_Community.exe CalmReason/VisualStudio - 码云 - 开源中国 (gitee.com) 百度云下载 链接:https://pan.baidu…...

day5|242.有效的字母异位词、349. 两个数组的交集

242.有效的字母异位词 题目链接:https://leetcode.cn/problems/valid-anagram/ 文章链接:https://programmercarl.com/0242.%E6%9C%89%E6%95%88%E7%9A%84%E5%AD%97%E6%AF%8D%E5%BC%82%E4%BD%8D%E8%AF%8D.html 视频链接:https://www.bilibili.…...

【Python基础】常用模块学习:sys|os|pytest

📢:如果你也对机器人、人工智能感兴趣,看来我们志同道合✨ 📢:不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢:文章若有幸对你有帮助,可点赞 👍…...

【煤矿虚拟仿真体验】VR采煤机技能培训有效提高训练效果

在我们的社会中,能源是至关重要的。它是推动我们日常生活和工作的主要动力。然而,我们在获取这种能源的过程中,也带来了许多环境问题。煤矿开采是其中的一个重要部分,因此我们需要寻找更环保、更安全的方式来进行煤矿开采。VR&…...

渲染路径RenderingPath

文章目录 前言一、什么是渲染路径二、渲染路径有哪些1、前向渲染路径2、延迟渲染路径3、顶点照明渲染路径(已过时)4、旧的渲染路径(已过时) 前言 渲染路径RenderingPath 一、什么是渲染路径 为进行光照计算而设计的渲染方式 二、渲染路径有哪些 1、前向…...

【Java】泛型 之 extends通配符

我们前面已经讲到了泛型的继承关系&#xff1a;Pair<Integer>不是Pair<Number>的子类。 假设我们定义了Pair<T>&#xff1a; public class Pair<T> { ... }然后&#xff0c;我们又针对Pair<Number>类型写了一个静态方法&#xff0c;它接收的参…...

光谱-空间特征分割提取:多光谱图像压缩

Spectral–Spatial Feature Partitioned Extraction Based on CNN for Multispectral Image Compression &#xff08;基于CNN的光谱-空间特征分割提取多光谱图像压缩&#xff09; 近年来&#xff0c;多光谱成像技术的迅速发展引起了各领域的高度重视&#xff0c;这就不可避免…...

绝缘子主要尺寸

声明 本文是学习GB-T 1000-2016 高压线路针式瓷绝缘子尺寸与特性. 而整理的学习笔记,分享出来希望更多人受益,如果存在侵权请及时联系我们 1 范围 本标准规定了高压线路针式瓷绝缘子的结构型式、尺寸、机械特性和电气特性。 本标准适用于标称电压为10 kV 及以下、频率不高于…...

什么是哈希表?如何使用哈希表进行数据存储和查找?

什么是哈希表&#xff1f; 哈希表&#xff08;Hash Table&#xff09;&#xff0c;也被称为散列表&#xff0c;是一种用于存储键值对数据的数据结构。它是一种非常高效的数据结构&#xff0c;可以实现快速的数据插入、查找和删除操作。哈希表的核心思想是通过将键&#xff08;…...

脑机接口的发展研究

1.调研对象&#xff1a;智能制造人机交互&#xff1b; 2.作业内容&#xff0c;关于个人所选技术的近期发展&#xff08;2020-2023年&#xff09;期间的相关技术问题和研究进展&#xff1b; 3.内容结构&#xff0c;分为摘要介绍&#xff08;100字以内&#xff09;&#xff0c;近…...

短期光伏发电量短期预测(Python代码,先对异常值处理,再基于XGBoost模型预测)

一.代码流程&#xff08;运行效果&#xff1a;短期光伏发电量短期预测&#xff08;Python代码&#xff0c;先对异常值处理&#xff0c;再基于XGBoost模型预测&#xff09;_哔哩哔哩_bilibili 模型流程&#xff1a; 导入所需的库&#xff0c;包括NumPy、Pandas、Matplotlib、Sea…...

SpringCloud Gateway--Predicate/断言(详细介绍)中

&#x1f600;前言 本篇博文是关于SpringCloud Gateway–Predicate/断言&#xff08;详细介绍&#xff09;中&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章可以…...

Linux内核启动流程-第一阶段汇编流程简介

一. Linux启动流程 看完 Linux 内核的顶层 Makefile 以后再来看 Linux 内核的大致启动流程&#xff0c; Linux 内核的启 动流程要比 uboot 复杂的多&#xff0c;涉及到的内容也更多。 本文中&#xff0c;我们就大致的了解一下 Linux 内 核的启动流程。 要分析 Li…...

SpringBoot-Druid

目录 1.什么是Druid 2.主要优点和原因 3.误区 4.Part代码 0.pom 1.Spring.datasource.type: com.alibaba.druid.pool.DruidDataSource 2.Druid用Jasypt加密任意内容 EnableEncryptableProperties开启加密注解 3.Druid监控平台 1.什么是Druid Druid 是一个开源的数据库…...

PAT甲级真题1006:签到与签出

&#x1f57a;作者&#xff1a; 主页 我的专栏C语言从0到1探秘C数据结构从0到1探秘Linux菜鸟刷题集 &#x1f618;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &#x1f3c7;码字不易&#xff0c;你的&#x1f44d;点赞&#x1f64c;收藏❤️关注对我真的…...

【架构篇】Supabase架构和功能介绍

Supabase是什么 Supabase将自己定位为Firebase的开源替代品&#xff0c;提供了一套工具来帮助开发者构建web或移动应用程序。Supabase是建立在Postgres之上的&#xff0c;Postgres是一个免费的开源数据库&#xff0c;被认为是世界上最稳定、最先进的数据库之一。Supabase对标F…...

Github主页无法打开和Assets转圈

1、cmd启动命令行 2、github.com打不开&#xff0c;多刷新几遍。等成功打开时&#xff0c;命令行输入nslookup github.com,把非权威应答下的IP地址复制到C:\Windows\System32\drivers\etc\hosts里&#xff0c;如查到的IP是192.30.255.112&#xff0c;则填写 192.30.255.112 gi…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

Python爬虫实战:研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园 二、准备工作 1. 编译环境 宿主机&#xff1a;Ubuntu 20.04.6 LTSHost&#xff1a;ARM32位交叉编译器&#xff1a;arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链 在交叉编译之前&#x…...

iOS 26 携众系统重磅更新,但“苹果智能”仍与国行无缘

美国西海岸的夏天&#xff0c;再次被苹果点燃。一年一度的全球开发者大会 WWDC25 如期而至&#xff0c;这不仅是开发者的盛宴&#xff0c;更是全球数亿苹果用户翘首以盼的科技春晚。今年&#xff0c;苹果依旧为我们带来了全家桶式的系统更新&#xff0c;包括 iOS 26、iPadOS 26…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...