VS Code Chrome Debug React App

Question

我在vscode中安装了chrome调试器。我不知道如何调试我的反应应用程序（渲染的服务器）。

以下是浏览器源标签中的应用结构：

  

localhost＆gt;公众＆gt; js＆gt; src（实际应用程序代码）

这是物理应用程序结构。另外，我正在使用gulp捆绑我的应用程序：

  

root＆gt; dist＆gt; js＆gt; （bundle.js，bundle.map.js，lib.js，lib.map.js）

这是我的启动配置：

{
    "version": "0.2.0",
    "configurations": [{
        "name": "Launch Chrome against localhost, with sourcemaps",
        "type": "chrome",
        "request": "launch",
        "url": "http://local.dporganizer.com/",
        "runtimeArgs": [
            "--user-data-dir",
            "--remote-debugging-port=9222"
        ],
        "sourceMaps": true,
        "webRoot": "${workspaceRoot}/public/js/src"
    }]
}

当我启动调试器并附加断点时，我收到此警报

  

断点被忽略，因为找不到生成的代码（源映射问题？）