Question

我已经克隆了webchat-repo来进行测试。正如Testing Web Chat for development purpose部分所述，我能够成功启动本地网络聊天实例。

cd packages/playground
npm start

我猜这将启动一个本地webpack开发服务器来服务${workspaceFolder}/packages/playgroud中的文件。依次使用其他各种软件包的lib目录中的文件。

现在，我想调试该代码（命中断点等），但我无法调试。

当我进入Google Chrome的Sources部分时，它会在软件包的lib文件夹中显示相关文件，但它们是无法读取的（即，对于调试无用）。附加了上面的屏幕截图。

我正在使用VS Code Chrome启动配置（启动配置是回购的一部分）来附加到本地开发服务器（本身就是成功的）。但是VSCode在断点上显示unverified breakpoint。我想是因为发生这种情况是因为VSCode无法确定如何将开发服务器提供的文件映射到源。

我要做的就是在VSCode工作区中放置一个断点，并在本地网络聊天的某个动作上击中该断点。我怎样才能做到这一点？如果不是来自VSCode，则至少要从Chrome的Sources标签开始。

我尝试更改Webpack devtools选项以生成源地图，但这无济于事。

我正在使用VSCode和Node v10在Ubuntu 18.04上进行开发。我是否缺少某些配置？我对JS前端生态系统（Webpack，Babel等）不太熟悉，所以可能是我在做一些愚蠢的事情（或没有做某事）。 任何帮助将不胜感激。

Answer 1

我也有此问题，并且有解决方法，但没有解决方法。

当我需要调试Web聊天代码时，我实际上打开了一个示例（例如01.a.getting-started-full-bundle并将其用作我的调试位置）。 serve.json对不同的Web聊天分发进行了采样，在此示例中，我使用/webchat.js

这将使用http://localhost:5000/samples/01.a.getting-started-full-bundle/index.html上的网络聊天客户端和漫游器来运行页面使用Ctrl + P将使您能够达到断点，并且还可以附加VS Code调试器。