VSCode可视化调试Vue代码

1.安装扩展Browser Preview

在这里插入图片描述
安装完成后在侧栏会多出一个图标，点击后就能打开内置谷歌浏览器

2.安装扩展Debugger for Chrome

在这里插入图片描述

3.在项目里创建launch.js文件

在这里插入图片描述
会在当前项目下生成文件夹和配置文件

4.编辑launch.js

url与项目启动后的地址保持一致

{
    // 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": "browser-preview",
            "request": "launch",
            "name": "Browser Preview: Launch",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*",
                "webpack:///./src/*": "${webRoot}/*"
            }
        }
    ]
}

5.配置项目vue.config.js

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

6.配置项目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版本
};