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)是一种程序设计范式,它将程序中的数据和操作数据的方法封装到对象中。在面向对象的世界里,一切都被视为对象,这些对象可以拥有数据(成员变量&…

专家表示提高学生阅读素养离不开家校协同

12月初,《北京市中小学生阅读能力分级标准指南(试行)》(以下简称《标准指南》)正式发布。据悉,《标准指南》由北京教育科学研究院研制,旨在进一步明确各学年段学生阅读素养发展目标,…

5. 赋值操作符

5. 赋值操作符 并不是程序清单12.3的所有问题都可以归咎于默认的复制构造函数,还需要看一看默认的赋值操作符。 ANSI C 允许结构赋值,而C允许类对象赋值,这是通过自动为类重载赋值操作符实现的。这种操作符 的原型如下: Class name & Class_name :: operator (const Class_…

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

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

《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位…

[原创][R语言]股票分析实战[3]:周级别涨幅趋势的相关性

[简介] 常用网名: 猪头三 出生日期: 1981.XX.XX QQ联系: 643439947 个人网站: 80x86汇编小站 https://www.x86asm.org 编程生涯: 2001年~至今[共22年] 职业生涯: 20年 开发语言: C/C、80x86ASM、PHP、Perl、Objective-C、Object Pascal、C#、Python 开发工具: Visual Studio、D…

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

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

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

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

SpringBoot和JDK版本兼容性

SpringBoot和JDK版本兼容问题,就是SpringBoot的每个版本支持哪些JDK版本。 在spring官网、spring-boot项目的github地址都没有找到一个统一的总结,类似表格这样,所以到spring-boot的各个版本的文档中找出来。如果有官方的总结我没找到的&…

uni-app只执行一次事件

在 <script setup> 中&#xff0c;你可以使用 onMounted 钩子函数来实现只执行一次的事件。onMounted 钩子函数会在组件挂载后立即执行&#xff0c;并且仅执行一次&#xff0c;因此适合用于只执行一次的事件处理。 以下是一个示例&#xff0c;演示了如何在 <script s…

Java 多线程之 ThreadLocal 的使用

文章目录 一、概述二、使用方法三、测试示例四、应用示例五、在 Spring 源码中应用 一、概述 ThreadLocal 用于在多线程环境中维护线程封闭&#xff08;thread-local&#xff09;的变量。线程封闭是一种确保变量在多线程环境中的线程安全性的机制&#xff0c;每个线程都有自己独…

3-高可用-隔离术

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

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

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

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

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