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

Question

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

到目前为止我做了什么：

我在 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 是我应该努力附加的那个吗？第二个端口总是随机的，我如何让调试器附加到它？
似乎 webpack-dev-server 也不关心 inspect-brk 因为客户端启动并工作...

我也不确定我是否使用 webpack-dev-server 来构建源映射 - 它们是否保存在内存中？

我试过设置固定端口、重映射sourceMapPathOverrides、设置outFiles和设置程序路径都无济于事。在写这篇文章之前，我什至没有看到它试图生成它自己的新端口...

Answer 1

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

例子

launch.json

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

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

VSC Debuging React, cannot create breakpoints / attach to process

javascript

debugging

reactjs

webpack

webpack-dev-server

例子