如何调试 Botframework Webchat 工作区代码？

Question

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

cd packages/playground
npm start

我猜这会启动一个本地 webpack 开发服务器来提供来自 ${workspaceFolder}/packages/playgroud 的文件。进而使用来自各种其他包的lib 目录的文件。

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

当我进入谷歌浏览器的Sources 部分时，它会在包的 lib 文件夹中显示相关文件，但它们是不可读的（即对调试没有用处）。附上上面的截图。

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

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

我尝试更改 Webpack devtools 选项以生成源映射，但这没有帮助。

我正在使用 VSCode 和 Node v10 在 Ubuntu 18.04 上进行开发。我错过了一些配置吗？我对 JS 前端生态系统（Webpack、Babel 等）不太熟悉，所以可能是我在做一些愚蠢的事情（或不做某事）。 我们将不胜感激。

Answer 1

我也有这个问题，我有一个解决方法，但没有解决方法。

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

1. 导航到01.a.getting-started-full-bundle
2. 在index.html 第10 行，将CDN 行更改为<script src="/webchat.js"></script>
3. 更改第 35 行以使用您的机器人的凭据（或使用 Mock Bot，保持此行不变）
4. 在网络聊天根文件夹中，运行npm run build:sample - 您只需执行一次
5. 也可以在 root 中运行 npx serve 或 serve（如果您已全局安装）

这将使用http://localhost:5000/samples/01.a.getting-started-full-bundle/index.html 上的网络聊天客户端和机器人运行页面 使用Ctrl + P 将允许您打断点，并且您也可以附加 VS Code 调试器。