关于visual-studio-code:如何在vscode中调试代码

应用步骤

1 在我的项目根目录上面创立 ./vscode/launch.json 文件，内容如下

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debugger In Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {"webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

2 启动你的本地我的项目
示例npm start

3 按 f5 启动调试
vscode 会主动关上浏览器，而后跳转至上述配置中 url 指向的地址。

4 增加断点
在vscode中找到须要增加断点的代码行，点击行号左侧增加断点。

5 刷新浏览器，当运行到断点处，代码就会停住，而后你就能够开始调试你的代码了。

配置项介绍

url
填写你本地启动我的项目的地址。