使用 vscode-chrome-debug 调试 vue.md

使用 vscode-chrome-debug 调试 vue

我使用的环境

vscode: 1.39.2

vscode-chrome-debug: 4.12.0

vue-cli: 4.0.5

chrome: 77.0.3865.120

参考官方指南 在 VS Code 中调试

1. 配置源映射

在根目录下添加vue.config.js

// vue.config.js
module.exports = {
  configureWebpack: {
    devtool: 'source-map',
  },
}

2. 添加调试配置

// .vscode/launch.json
{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "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}/*"
      }
    }
  ]
}

注意 1: 这里有一点是跟指南中有区别的,指南中sourceMapPathOverrides的值为{"webpack:///./src/*": "${webRoot}/*"},但是我发现这样配置无法断点到methods中的方法,打开开发者工具查看,webpack:///./src下的文件是编译后的,跟源码一样的目录是在webpack:///src下面的,修改之后就可以正常调试了. 注意 2: 如果 url 需要根据实际运行中的 url 来变化,默认 vue 用的是 8080 端口,如果 8080 端口已经被占用,运行时就会变成别的,需要查看运行时控制台的输出

3. 运行 vue 项目

yarn serve

4. 按 F5 开始调试