vscode中调试vuejs代码

1. 在vscode中安装Debugger for Chrome插件

2.在vscode的run或者debug页签中，找到齿轮按钮。点击后选择chrome会创建并打开launch.json文件　　

3.把launch.json文件中的配置改成（注意url是你项目的地址）

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

  　　       　　   }

  　　        }

    ]

 

4.把项目中config/index.js内的devtool属性设置成source-map

5.使用终端npm run dev启动项目

6.设置断点，并点击齿轮图标左边的绿色三角按钮启动浏览器