VSC调试React，无法创建断点/无法附加到进程

Question

我一直在尝试许多潜在的修复方法，但是到目前为止，它们都没有帮助我。我无法使调试器正确附加，它确实附加了，但没有给我断点（设置了断点但尚未绑定）。

[我到目前为止所做的：

我在launch.json中创建了条目

{
      "type": "node",
      "request": "launch",
      "name": "Launch debug client",
      "sourceMaps": true,
      "runtimeExecutable": "node",
      "runtimeArgs": [
        "--inspect-brk",
        "./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
      ],
      "cwd": "${workspaceFolder}/client/"
    }

导致此error。我应该努力附加的第二个--inspect-brk = PORT吗？第二个PORT始终是随机的，我如何使调试器附加到该端口？似乎webpack-dev-server并不关心inspect-brk，因为客户端启动并可以工作了...

我也不知道我是否有webpack-dev-server来构建源映射-它们是否保存在内存中？

我确实尝试设置固定端口，重新映射sourceMapPathOverrides，设置outFiles并将程序路径设置为无效。在编写本文之前，我什至没有看到它试图生成自己的新端口...

Answer 1

如果有人偶然发现：Webpack-dev-server已已经在调试器模式下启动，并且当前附加到该进程的唯一方法（据我所知）是通过浏览器。您需要针对正在使用的浏览器（当前仅适用于chrome和firefox）为vsc安装调试器扩展。然后，您可以将webpack-dev-server所启动的URL附加/启动，然后vscode会挂接到该实例。

示例

launch.json

    {
      "type": "firefox",
      "name": "firefox debug",
      "request": "launch",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/client"
    }