从红屏到断点，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模式再次启动

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

打完收工！