1、安装

        1、vSCode 
        2、浏览器
        3、浏览器的相应的 Debugger 扩展：

                Debugger for Chrome 

                Debugger for Firefox 
        4、使用vue-cli命令创建项目

2、配置source map

    

     1、Vue CLI 2：
        请设置并更新 config/index.js 内的 devtool property：

            devtool: 'source-map',

     2、Vue CLI 3：
        请设置并更新 vue.config.js 内的 devtool property：

            module.exports = {
                configureWebpack: {
                    devtool: 'source-map',
                },
            }

3、vscode启动应用

        1、配置lanuch.json文件
        选择 Chrome/Firefox: Launch 环境。然后将生成的 launch.json 的内容替换成为相应的配置：

添加 Chrome 配置

    {
    "version": "0.2.0",
    "configurations": [
        {
        "type": "chrome",
        "request": "launch",
        "name": "vuejs: chrome",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "breakOnLoad": true,
        "sourceMapPathOverrides": {
            "webpack:///src/*": "${webRoot}/*"
        }
        },
        {
        "type": "firefox",
        "request": "launch",
        "name": "vuejs: firefox",
        "url": "http://localhost:8080",
        "webRoot": "${workspaceFolder}/src",
        "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }]
        }
    ]
    }

4、设置一个断点

    在 src/components/HelloWorld.vue 的 line 90 的地方设置一个断点，这里的 data 函数返回一个字符串。

5、 断点渲染器，启动应用

在根目录打开你惯用的终端并使用 Vue CLI 开启这个应用：

npm run serve

6、启动debug设置

来到 Debug 视图，选择 “vuejs: chrome/firefox” 配置，然后按 F5 或点击那个绿色的 play 按钮。

随着一个新的浏览器实例打开 http://localhost:8080，断点出现。