使用vs code对vue进行断点调试

首先在vs code中安装 Debugger for Chrome 之后配置launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:5050",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///./src/*": "${webRoot}/*"
      }
    }
}

这是配置chrome的json

接着去vue.config.js内配置

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

然后重跑服务，打断点，点那个小虫子，选择就能看到断点了，

打断点的时候需要先停掉debug，打完了在启动就能看到了。

vue的官方介绍