VSCode调试Vue代码

1.安装扩展

Debugger for Chrome

2.创建launch.js

会在当前项目下生成文件夹和配置文件

3.编辑launch.js

{
    // 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:8080",
            "webRoot": "${workspaceFolder}/src",
            "breakOnLoad": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./src/*": "${webRoot}/*"
            }
        }
    ]
}

字段说明：

字段	含义
version	定义这个配置文件的版本，生成的时候默认是0.2.0
configurations	配置域
name	配置文件的名字，可以自定义
type	调试的类型，node是vscode本身就支持，其他就需要下载插件了
request	配置文件的请求类型，有launch和attach两种，launch是需要服务器的需要配置url
url	指定访问的链接
webRoot	指定根目录或者执行文件
sourceMaps	默认是启用的，对于打包的调试
userDataDir	临时目录,专门保存调试过程产生的东西，这个字段是为了重新打开一个浏览器窗口，不会强制关闭已经打开的浏览器

预定变量	含义
${workspaceRoot}	VSCode中打开文件夹的路径
${workspaceRootFolderName}	VSCode中打开文件夹的路径, 但不包含"/"
${file}	当前打开的文件
${relativeFile}	当前打开的文件,相对于workspaceRoot
${fileBasename}	当前打开文件的文件名, 不含扩展名
${fileDirname}	当前打开文件的目录名
${fileExtname}	当前打开文件的扩展名
${cwd}	当前启动时的工作目录

4.配置项目vue.config.js

module.exports = {
    productionSourceMap: false,
    configureWebpack: {
        devtool: 'source-map'
    }
    //或者下面这种方式
    //configureWebpack: config => {
	//	config.devtool = 'source-map'; 
	//}
};

5.配置项目babel.config.js

module.exports = {
    env: {
        debug: {
            sourceMap: true,
            retainLines: true
        }
    },
    //presets: ['@vue/app'] //@vue/cli-plugin-babel 3.x版本
    presets: ['@vue/cli-plugin-babel/preset'] //@vue/cli-plugin-babel 4.x版本
};

6.在项目js文件或vue文件左侧序号行打好断点

7.启动vue项目

服务端运行的地址和端口必须与launch.js中保持一致

8.按F5或点击绿色小三角启动调试

默认会出现调试工具条，并自动打开一个Chrome窗口

9.自动进入设置的断点

按F5：继续下一个断点
按F10：下一步
按F11：进入详细步骤（比如函数体内）
按Shift+F11：跳出详细步骤

注意点：

1.这个创建的文件夹必须在项目根目录下，否则断点无法激活

2.launch.js、vue.config.js、babel.config.js配置文件在不同版本上会有差异，根据自己的版本来配置

3.修改launch.js、vue.config.js、babel.config.js这些配置文件后，手动npm run serve重启下项目