vscode调试vue项目

安装Debugger for Chrome插件

找到“扩展”或者按快捷键“Ctrl+Shift+X”，输入Debugger for Chrome查找，并安装。

配置chrome到launch.json中

然后打开“调试”或者快捷键“Ctrl+Shift+D”，点击配置按钮Open launch.json，弹出选项中选择Chrome，然后会创建并打开launch.json文件，将里面的内容替换成一下内容，默认内容是下面的内容

{
    "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}/*"
        }
      },
    ]
  }

在终端运行命令npm run dev

方法一（推荐）：直接快捷键”Ctrl+`“打开终端，运行命令npm run dev，然后直接F5即可打开chrome浏览器调试；
方法二：可以在vscode中右击vue项目的根目录，比如src，Open in Terminal（打开终端），然后再输入cd ..，回退到vue项目的根目录，我们的目的是让终端在项目的根目录上，然后就可以运行命令npm run dev，然后点击调试功能中的绿色箭头开启调试即可打开chrome浏览器调试。

PS C:\Users\eluzhu\Desktop\项目\test\src> cd ..
PS C:\Users\eluzhu\Desktop\项目\test> npm run dev

断点调试

直接在你想要查看的代码第几行左侧添加断点，设置成功可以看到比如200行左侧出现红点，至此断点调试就完成了。
另外，默认vscode对vue没有代码高亮支持，可以下载Vetur插件。