1. 安装扩展

image.png

2. launch.json

项目根目录添加launch.json，配置信息如下：

  1. {
  2.   "version": "0.1.0",
  3.   "configurations": [
  4.     {
  5.       "name": "chrome",
  6.       "type": "chrome",
  7.       "request": "launch",
  8.       "url": "http://localhost:8080", // 这里可能跟我的不一样
  9.       "webRoot": "${workspaceRoot}"
  10.     }
  11.   ]
  12. }

3. 配置serve命令

在package.json的scripts中配置serve命令，添加--open
image.png

4. 运行项目

终端输入 yarn serve运行项目，看到结果：
image.png

5. debug

image.png

vscode面板中会输出控制台信息，并可在编辑器中添加断点了，