vscode配置断点调试

1.配置launch.json

2.写入以下配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:80", // 根据端口调整
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*",
        "webpack:///./src/*": "${webRoot}/*",
        "webpack:///./*": "${webRoot}/*",
        "webpack:///*": "*",
        "webpack:///./~/*": "${webRoot}/node_modules/*"
      },
      // 使用浏览器的devtool，去掉则在vscode中控制
      "runtimeArgs": [
        "--auto-open-devtools-for-tabs"
      ],
      "sourceMaps": true
    }
  ]
}

3. 运行项目，根据项目占用的端口调整url
4. 启动调试工具
5. 会自动跳出一个chrome窗口，可以调试了.

注：主要针对前端项目。框架通常为vue或者react。配置完成后，在编辑器里打红点就能运用到项目中，但必须通过vscode跳出的浏览器才能进行调试。实际操作中直接打debugger也挺方便的。