从红屏到断点，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

1. module.exports = {
2.         configureWebpack: {
3.                 devtool: 'source-map'
4.         }
5. }

复制代码

接下来选择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 表示启用详细的调试日志记录。这将生成更多的调试信息，帮助你诊断和解决调试过程中遇到的问题。
  

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": "Launch Chrome against localhost",
11.             "url": "http://localhost:5173",
12.             "webRoot": "${workspaceFolder}/src",
13.             "sourceMaps": true,
14.             "trace": true
15.         }
16.     ]
17. }

复制代码

首先正常启动项目

1. npm run dev
2. 或者
3. 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 表示启用详细的调试日志记录。这将生成更多的调试信息，帮助你诊断和解决调试过程中遇到的问题。
  

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": "Launch Chrome against localhost",
11.             "url": "http://localhost:5173",
12.             "webRoot": "${workspaceFolder}/module_vue3/src",
13.             "sourceMaps": true,
14.             "trace": true
15.         }
16.     ]
17. }

复制代码

首先正常启动项目

1. npm run dev
2. 或者
3. npm run serve

复制代码

在项目已经启动的基础上，给项目源代码适当位置打上断点，然后选择IDE左侧边栏的Debug按钮以Debug模式再次启动

同时自动弹出新的调试模式浏览器主页窗口，证明调试模式已生效

打完收工！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！