vscode vue项目代码断点调试

1.下载Debugger for Chrome

2.点击昆虫图标,设置图标

复制以下代码

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch chrom against localhost",
      "url": "http://localhost:8080", // 注意,端口号一定要与你启动项目的端口号一致
      "webRoot": "${workspaceFolder}"
    }
  ]
}

3. 配置的launch.json一定要在你项目的根目录下
   
4. 启动项目,开始断点调试,还会自动打开浏览器,更方便调试哦!
   
   温馨提示:只能在js文件中打断点，vue格式文件中的js代码可以在要调试的js代码前加debugger,所以建议把.vue文件拆分成html,js,一来方便维护,二来方便调试,如图