vue-cli3 vscode debug 实践

1， vue-cli3 create 一个app之后，在根目录中增加 vue.config.js文件

     其中内容为：

module.exports = {

    configureWebpack: {

        devtool: 'source-map'

    }

  }

2，需要在VSCode中安装Debugger for Chrome扩展

3，在桌面创建Chrome快捷方式，在快捷方式上点右键，属性，目标 最后增加  --remote-debugging-port=9222（与前面引号间注意保留空格）

4， 在VScode 中 打开app所在目录，点击左侧的 Debug(调试)图标，之后 新增调试配置。注意launch.json要在app的根目录中。之前断点无效是因为每次打开了app目录的上一级目录。

      vscode会打开launch.json

     增加如下内容

"version": "0.2.0",

    "configurations": [

        {

            "type": "chrome",

            "request": "attach",

            "name": "Attach to Chrome",

            "port": 9222,

            "webRoot": "${workspaceFolder}/src",

            "sourceMaps": true,

            "sourceMapPathOverrides": {

                "webpack:///src/*": "${webRoot}/*"

            }

        }

]

 

5, 执行 yarn serve

6， 点击桌面Chrome快捷方式，运行Chrome，输入http://localhost:8080

7,   vs code，Debug中绿色运行按钮，设置断点进行调试。