VS Code 调试 Vue 项目 （Edge、Chrome、FireFox）

一、安装调试器

Debugger for Microsoft Edge
Debugger for Chrome
Debugger for FireFox

二、配置 lanuch.json

{
  "version": "0.2.0",
  "configurations": [
      {
      "type": "edge",
      "request": "launch",  
      "name": "vue:edge",  // 此项配置的名字，显示在调试页的配置选择下拉框中。
      "url": "http://localhost:8080",  // chrome 自动启动时打开的网址(开发环境启动的本地调试入口)。
      "webRoot": "${workspaceFolder}",  // 静态文件所在的本机目录(一般是项目根目录)。
      "sourceMaps": true
    },
    {
      "type": "chrome",
      "request": "launch",  
      "name": "vue:Chrome",  // 此项配置的名字，显示在调试页的配置选择下拉框中。
      "url": "http://localhost:8080",  // chrome 自动启动时打开的网址(开发环境启动的本地调试入口)。
      "webRoot": "${workspaceFolder}",  // 静态文件所在的本机目录(一般是项目根目录)。
      "sourceMaps": true
    },
    {
      "type": "firefox",
      "request": "launch",  
      "name": "vue:firefox",  // 此项配置的名字，显示在调试页的配置选择下拉框中。
      "url": "http://localhost:8080",  // chrome 自动启动时打开的网址(开发环境启动的本地调试入口)。
      "webRoot": "${workspaceFolder}",  // 静态文件所在的本机目录(一般是项目根目录)。
      "sourceMaps": true      
    }
  ]
}

三、配置 devtool

在根目录下的vue.config.js中添加以下配置:

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

四、运行调试

yarn serve

F5：启动调试
本例中默认启动 Edge