从红屏到断点，VSCode+Chrome打开调试vue.js项目的黄金配置公式，后端转前端必看！
夙夜小哥这几天有个项目前端人手不够，要我支援几天。我本人之前是写后端的，在支援的过程中发现前端对JavaScript或者typescript的方法提示以及代码导航功能都比较弱，可能是由于js本身属于弱类型语言，所以这波并不属于VSCode的锅。但是我又发现好像VSCode不进行配置的话，没法直接使用调试功能，好家伙，这下让我一顿上网冲浪百度+谷歌，翻来翻去感觉网友都没有写在点子上，最后还是我结合Vue官方文档与Copilot得到了答案
不得不感叹如今AI能力的强大。。
https://v2.cn.vuejs.org/v2/cookbook/debugging-in-vscode.html
https://copilot.microsoft.com/
好了，接下来进入本文的正题，“在VSCode中，如何调试我们的Vue前端项目"
开启webpack源映射source-map
首先新建vue.confg.js，开启webpack源映射source-map
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}接下来选择Run and Debug，创建属于VSCode的launch.json配置文件
在以上source-map开启的基础上，launch.json配置文件的具体配置需要根据当前项目src目录所处的位置有以下两种情况
[*]scr在跟目录下如/project/src
[*]src不在根目录下如/project/.../src
launch.json配置文件的具体配置见下文
src在根目录下如/project/src
项目结构如下：vue3-practice/src
.vscode/launch.json配置如下：
[*]指定项目启动端口："url": "http://localhost:5173"
[*]指定src目录位置："webRoot": "${workspaceFolder}/src",其中 ${workspaceFolder}意味着项目根目录vue3-practice
[*]开启webpack源映射source-map："sourceMaps": true 。这里的 "sourceMaps": true 和vue.config.js中的 module.exports = { configureWebpack: { devtool: 'source-map' } } 的配置并不重复。前者是 VS Code 调试配置中的一部分，用于告诉调试器使用源映射，而后者是 Webpack 配置的一部分，用于生成源映射文件。两者共同作用，确保调试器能够正确映射到源代码。
[*]在调试配置中，"trace": true 表示启用详细的调试日志记录。这将生成更多的调试信息，帮助你诊断和解决调试过程中遇到的问题。
{
// 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": "Launch Chrome against localhost",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}/src",
"sourceMaps": true,
"trace": true
}
]
}首先正常启动项目
npm run dev
或者
npm run serve在项目已经启动的基础上，给项目源代码适当位置打上断点，然后选择IDE左侧边栏的Debug按钮以Debug模式再次启动
同时自动弹出新的调试模式浏览器主页窗口，证明调试模式已生效
src不在根目录下如/project/.../src
项目结构如下：NORMALIZEDVUE3/module_vue3/src
.vscode/launch.json配置如下：
[*]指定项目启动端口："url": "http://localhost:5173"
[*]指定src目录位置："webRoot": "${workspaceFolder}/module_vue3/src",其中 ${workspaceFolder} 意味着项目的根目录NORMALIZEDVUE3
[*]开启webpack源映射source-map："sourceMaps": true 。这里的 "sourceMaps": true 和vue.config.js中的 module.exports = { configureWebpack: { devtool: 'source-map' } } 的配置并不重复。前者是 VS Code 调试配置中的一部分，用于告诉调试器使用源映射，而后者是 Webpack 配置的一部分，用于生成源映射文件。两者共同作用，确保调试器能够正确映射到源代码。
[*]在调试配置中，"trace": true 表示启用详细的调试日志记录。这将生成更多的调试信息，帮助你诊断和解决调试过程中遇到的问题。
{
// 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": "Launch Chrome against localhost",
"url": "http://localhost:5173",
"webRoot": "${workspaceFolder}/module_vue3/src",
"sourceMaps": true,
"trace": true
}
]
}首先正常启动项目
npm run dev
或者
npm run serve在项目已经启动的基础上，给项目源代码适当位置打上断点，然后选择IDE左侧边栏的Debug按钮以Debug模式再次启动
同时自动弹出新的调试模式浏览器主页窗口，证明调试模式已生效
打完收工！
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 前排留名，哈哈哈 懂技术并乐意极积无私分享的人越来越少。珍惜 新版吗？好像是停更了吧。 这个好，看起来很实用 yyds。多谢分享 前排留名，哈哈哈 感谢分享，学习下。 感谢发布原创作品，程序园因你更精彩 感谢发布原创作品，程序园因你更精彩 鼓励转贴优秀软件安全工具和文档！ 感谢分享，学习下。 感谢分享，学习下。 谢谢分享，辛苦了 东西不错很实用谢谢分享 感谢分享，学习下。 收藏一下 不知道什么时候能用到 谢谢楼主提供！ 谢谢楼主提供！ yyds。多谢分享