https://www.cnblogs.com/xifengxiaoma/p/9530737.html

1. 开启 Chrome 远程调试端口

• window
  --remote-debugging-port=9222
  image.png

2.安装 Chrome Debug 插件

image.png

3.创建 Debug 配置文件

image.png

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "port": 9222,
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

4. 修改 webpack 配置

如果是基于 webpack 打包的 vue 项目， 可能会存在断点不匹配的问题, 还需要做些修改

打开根目录下的 config 目录下的 index.js 文件

    dev: {
        devtool: 'eval-source-map',
        cacheBusting: false
    }

5.开启调试

在 vue 项目中执行 npm run dev
点击调试中的绿色按钮就 ok 了

image.png