VS Code调试 vue项目

Vscode调试vue项目

1. 首先安装插件： Debugger for Chrome
2. 点击Debugger图标来到Debug视图栏，然后点击那个齿轮图标来配置一个 launch.json 的文件,将下面配置先贴上保存。

{
  "version": "0.2.0",
  "configurations": [ {
          "type": "chrome",
          "request": "launch",
          "name": "vuejs: chrome",
          "url": "http://127.0.0.1:8080",  // 这个地址要正确
          "webRoot": "${workspaceFolder}/src",
          "breakOnLoad": true,
          "sourceMapPathOverrides": {
              "webpack:///src/*": "${webRoot}/*"
          }
      }
  ]
}

3. 项目中代码设置断点
4. 在终端【必须vscode的终端】运行项目，获取当前项目的url:http://localhost:9528/
5. 修改 launch.json文件中url的配置为:http://localhost:9528/
6. 点击Debug视图栏中的绿色启动按钮

7. 打开调试控制台，可以查看一些代码中的console.log打印和变量值