VSCode调试Vue项目

前言

        代码在某个平台运行时,会将运行时的状态通过某种方式暴露出来。这些状态信息可以通过某种方式传递给开发工具,以便进行UI的展示和交互。这样的交互可以辅助开发者排查问题、梳理流程,并更好地了解代码的运行状态。这就是我们通常所说的调试。     

        在过去,我们常常需要在浏览器中进行调试,但这种方式往往显得繁琐,尤其是在只有一个屏幕的情况下,我们很难同时查看代码和调试信息。然而,VSCode 拥有内置的 Debug 功能,使得调试变得更加便捷。


问题

        在使用 VSCode 进行调试时,我们可以通过 Debug 窗口的 " create a launch.json file " 快速创建配置文件。然而,有时候我们会发现 VSCode 提示未绑定断点,这时我们需要去浏览器中对应文件看看是什么情况。可能是因为某些特定的代码行没有被正确地设置为断点,或者可能是因为某些设置或配置问题导致的。       

        我们去浏览器中查看对应路径,发现路径后面多了个 ?bc11( hash 字符串),导致在本地项目目录中找不到对应的文件。那么为什么会多了一个哈希字符串呢?

        这是因为 Vue Cli 默认的 devtool 设置是 eval-cheap-module-source-map,而 eval 是每个模块用 eval 包裹,并且通过 sourceURL 指定文件路径,通过 sourceMappingURL 指定 sourcemap。

        而 sourceURL 和 sourceMappingURL 是两个 JavaScript 的编译器选项,它们用于提供源代码的映射信息。这些选项主要用于调试,让开发者能够看到原始源代码,而不是编译后的代码,可以帮助开发者更容易地调试和了解编译后的代码是如何生成的。

sourceURL

  • 这是一个字符串,它提供了源代码的 URL。当使用 eval() 执行代码时,这个 URL 会被添加到编译后的代码中,这样开发者就可以知道哪些代码是通过 eval() 执行的。
  • 例如,如果你有一个模块,你使用 eval() 来包裹它,你可以使用 sourceURL 来指定这个模块的源代码 URL。这使得在浏览器的开发者工具中,你可以直接跳转到这个模块的源代码位置。

sourceMappingURL

  • 这是一个 URL,指向源代码的映射信息。源代码映射是一个数据结构,它描述了编译后的代码与原始源代码之间的映射关系。这使得开发者可以更容易地理解编译后的代码是如何从原始源代码生成的。
  • 当你在浏览器中打开开发者工具并查看编译后的代码时,如果这个文件有源映射,那么你可以点击某个位置,直接跳转到原始的源代码位置。

        所以我们可以发现是 Vue CLI 默认的 devtool 设置所导致的,那么我们就可以通过修改对应的配置项来解决问题。


解决

        Vue2

        点击 Debug 窗口的 " create a launch.json file " 后,会自动生成 .vscode 文件夹,里面的 launch.json 文件如下所示:

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

        我们修改 webRoot 与 sourceMapPathOverrides 配置:

{"version": "0.2.0","configurations": [{"name": "my-debug","type": "chrome","request": "launch","url": "http://localhost:8080","webRoot": "${workspaceFolder}/src","sourceMapPathOverrides": {"webpack:///./src/*": "${webRoot}/*"}}]
}

        在 vue.config.json 中修改 devtool 配置为 source-map:

        重新运行项目,再打断点试验,一切正常使用:

        Vue3 

        Webpack构建:

        无需修改 launch.json 文件,只用修改 vue.config.js 中的 configureWebpack 配置项,重新运行即可:

        Vite 构建:

        无需额外配置即可直接使用相应功能。


总结

Webpack 在构建过程中会将源代码编译成可执行代码,这使得源代码中的变量和函数名在编译后的代码中可能会被改变,因此在使用 Webpack 进行调试时,可能会出现断点变灰的情况。此外,Webpack 还可能需要额外的配置才能正确地处理源代码映射和调试信息。

相比之下,Vite 使用了更先进的构建和开发方式,它通过原生 ES 模块( ESM )的方式直接运行源代码,而不是将源代码编译成可执行代码。这使得 Vite 可以更准确地保留源代码中的变量和函数名,从而使得在 Vite 中进行调试时可以更容易地设置断点并查看调试信息。

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

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

相关文章

Excel如何将行的值转换为列值?

问题:Excel如何将行的值转换为列值?(如图左表变成右表) 1.用 SUMIFS(求和区域, 条件区域1, 条件1, [条件区域2, 条件2], ...)函数 比如:=SUMIFS($C$2:$C$8,$A$2:$A$8,H3,$B$2:$B$8,"快车") 2.直接用简单的透视表 (1)随机点击目标目标表格任何位置,点击插入…

C语言—每日选择题—Day56

指针相关博客 打响指针的第一枪:指针家族-CSDN博客 深入理解:指针变量的解引用 与 加法运算-CSDN博客 第一题 1. 以下叙述中正确的是() A:\0 表示字符 0 B:"a" 表示一个字符常量 C:表…

(企业 / 公司项目)Java如何打印漂亮的日志?

启动类 首先在idea创建一个项目这里就不演示了,直接看demo 找到项目的启动类,首先把启动类日志打印基本信息,这样就不用找来找去找不到地址以及端口 主要作用就是启动一个Spring Boot应用程序,并获取程序的运行环境。首先创建一…

javaSE学习-4-类和对象

1. 面向对象的初步认知 1.1 什么是面向对象 面向对象编程(OOP)是一种程序设计范式,它将程序中的数据和操作数据的方法封装到对象中。在面向对象的世界里,一切都被视为对象,这些对象可以拥有数据(成员变量&…

大数据机器学习:从理论到实战,探索学习率的调整策略

大数据机器学习:从理论到实战,探索学习率的调整策略 全文目录 大数据机器学习:从理论到实战,探索学习率的调整策略一、引言二、学习率基础定义与解释学习率与梯度下降学习率对模型性能的影响 三、学习率调整策略常量学习率时间衰减…

《PySpark大数据分析实战》-16.云服务模式Databricks介绍运行案例

📋 博主简介 💖 作者简介:大家好,我是wux_labs。😜 热衷于各种主流技术,热爱数据科学、机器学习、云计算、人工智能。 通过了TiDB数据库专员(PCTA)、TiDB数据库专家(PCTP…

【大数据面试】Flink面试题附答案

目录 ✅Flink介绍、特点、应用场景 ✅Flink与Spark Streaming的区别 ✅Flink有哪些部署模式 ✅Flink架构 ✅怎么设置并行度? ✅什么是算子链? ✅什么是任务槽(Task Slots)? ✅任务槽和并行度的关系 ✅Flink作…

TOPCON拓普康SR-3AR亮度计

特征 ■ 分光测光方式下的高速度、高精度值测定。 ■ 无需使用辅助镜,也能实现细微面、低亮度领域的高精度测定。 ■ 电动切换测定角(2/1/0.2/0.1)。 ■ 高精度测定频闪光源(搭载同步测定功能、积分时间延期…

uint29传输格式

前言 不知道谁想出来的。 反正我是想不到。 我看网上也没人讲这个。 写篇博客帮一下素未谋面的网友。 uint29 本质上是网络传输的时候,借用至多4字节Bytes,表达29位的无符号整数。 读8位数字,判断小于128? 是的话,返回末7位…

App(Android)ICP备案号查询——————高仿微信

😄 个人主页:✨拉莫帅-CSDN博客✨🤔 博文:132篇🔥 原创:130篇,转载:2篇🔥 总阅读量:388923❤️ 粉丝量:112🍁 感谢点赞和关注 &#x…

大数据时代,如何基于机密虚拟化技术构建数据安全的“基石”

云布道师 2023 年 10 月 31 日-11 月 2 日,2023 云栖大会在中国杭州云栖小镇举行,阿里云弹性计算产品专家唐湘华、阿里云高级安全专家刘煜堃、蚂蚁集团高级技术专家肖俊贤三位嘉宾在【云服务器 & 计算服务】专场中共同带来题为《大数据时代&#xf…

3-高可用-隔离术

隔离是指将系统或资源分割开,系统隔离是为了在系统发生故障时,能限定传播范围和影响范围,即发生故障后不会出现滚雪球效应,从而保证只有出问题的服务不可用,其他服务还是可用的。 比较多的隔离手段有线程隔离、进程隔…

Java--包,访问修饰符,多态数组,==和equals,hashcode,toString

包 同一个包里面不能有重复的类,不同的包可以有相同的类,包和包之间互不干涉。一个包下面有很多的类。 包的命名规则: 只能包含数字,字母,下划线,小圆点,但不能用数字开头,不能是关…

2_js运算符与流程控制语句

1. 运算符的应用 1.1 算数运算符 浮点数的精度问题 浮点数值的最高精度是17位小数,不要直接判断两个浮点数是否相等。 var result 0.1 0.2; // 结果不是 0.3,而是:0.30000000000000004 console.log(0.07 * 100); // 结果不是 7&#…

C++学习笔记(十五)

继承 继承是面向对象三大特性之一 有些类与类之间存在特殊的关系,例如下图中: 我们发现,定义这些类时,下级别的成员除了拥有上一级的共性,还有自己的特性。 这个时候我们就可以考虑利用继承的技术,减少重…

3 - Electron app BrowserWindow对象-关于窗口

优雅的打开应用~ 当加载缓慢,打开应用的一瞬间会出现白屏,以下方法可以解决 const mainWindow new BrowserWindow({ show: false }) mainWindow.once(ready-to-show, () > {mainWindow.show() }) 设置背景颜色 const win new BrowserWindow({ b…

MongoDB的原子操作findAndReplace、findOneAndDelete和deleteMany

本文主要介绍MongoDB的原子操作findAndReplace、findOneAndDelete和deleteMany。 目录 MongoDB的原子操作一、findAndReplace二、findOneAndDelete三、deleteMany MongoDB的原子操作 MongoDB的原子操作指的是在单个操作中对数据库的数据进行读取和修改,并确保操作是…

selenium css定位

selenium-css定位 element_css driver.find_element(By.CSS_SELECTOR, css表达式)css定位说明 selenium中的css定位,实际是通过css选择器来定位到具体元素,css选择器来自于css语法 css定位优点 语法简洁对比其他定位方式,定位效率更快对…

高防服务器防御靠谱吗?

​  随着互联网的普及和信息技术的不断发展,网络安全问题日益突出。高防服务器作为一种专业的网络安全设备,在防御网络攻击方面扮演着越来越重要的角色。然而,高防服务器是否靠谱,是否能够有效地防御各种网络攻击,一…

CUMT--Java--JDBC编程

目录 一、JDBC简介 二、数据库访问 1、加载数据库驱动 2、建立数据连接 3、创建Statement对象 4、执行SQL语句 5、访问结果集 三、MetaData接口 1、DatabaseMetaData接口 2、ResultSetMetaData接口 四、事务 1、JDBC中的事务 2、保存点 3、批量更新 一、JDBC简…