1. 安装 Debugger for Chrome

image.png

2. 修改 vue.config.js

  1.   configureWebpack: {
  2.     devtool: 'source-map'
  3.   }

3. 修改 .vscode/launch.json

  1. {
  2.   // 使用 IntelliSense 了解相关属性。 
  3.   // 悬停以查看现有属性的描述。
  4.   // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  5.   "version": "0.2.0",
  6.   "configurations": [
  7.     {
  8.       "type": "chrome",
  9.       "request": "launch",
  10.       "name": "Launch Chrome against localhost",
  11.       "url": "http://localhost:8080",
  12.       "webRoot": "${workspaceFolder}/src",
  13.       "breakOnLoad": true,
  14.       "sourceMapPathOverrides": {
  15.         "webpack:///src/*": "${webRoot}/*",
  16.         "webpack:///./src/*": "${webRoot}/*"
  17.       }
  18.     }
  19.   ]
  20. }

4. 启动服务

  1. > npm run serve
  3.  DONE  Compiled successfully in 11015ms                                                                                                                                 15:09:59
  5. No type errors found
  6. Version: typescript 3.6.2
  7. Time: 8206ms
  9.   App running at:
  10.   - Local:   http://localhost:8080/
  11.   - Network: http://172.16.43.74:8080/
  13.   Note that the development build is not optimized.
  14.   To create a production build, run yarn build.

5. 设置断点

image.png

6. 启动调试

点击绿色箭头或者F5
image.png
开启调试用的chrome
image.png

7. 命中断点

image.png