vsCode调试Vue项目

vsCode调试Vue项目步骤(vue2项目为例)

1. sourceMap打开， vue.config.js（修改完配置文件， 项目重启一下）

modules.exports = {
  // ... 其他配置
  configureWebpack: (config) => {
    if (process.env.NODE_ENV !== 'production') {
      config.devtool = 'source-map'
    }
  }
}

2. 找到下面这个页面，创建配置文件
   
3. 选择调试器， 下面以谷歌浏览器为例
   
4. 接下来就可以创建 launch.json 文件

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "projectTest", // 自定义名称
      "url": "http://localhost:8000",  //项目启动地址
      "webRoot": "${workspaceFolder}",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${workspaceFolder}/src/*"
      }
    }
  ]
}

5. 配置好以后直接点这个按钮启动调试（会默认在浏览器打开项目）
   
6. 在想要调试的代码前面打上断点， 我这里以登录为例
   
7. 打开调试的浏览器页面， 输入 qqq, 1234 点击登录
   
8. 进入断点， 就可以调试了