时间戳

首页 > 解决方案 > 使用 webpack 和裁缝调试 React 微服务应用程序

javascript - 使用 webpack 和裁缝调试 React 微服务应用程序

问题描述

我有一个用 react 创建并用裁缝定制的微服务应用程序。目前我的后端是用 node.js 模拟的。

现在我尝试调试而不是在 bundle.js 中，而是在实际的 javascript 文件中。

我按照这些说明（使用 phpstorm 代替）： https ://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/

我在 webpack.config.js 中使用 devtool: 'source-map' 并配置了一个 Javascript 调试作业，我在其中添加了远程 URL。

当我在微服务中设置断点时，一切似乎都正常，首先由裁缝呈现。

但是永远不会命中另一个服务中的断点。源映射在每个微服务 webpack.config.js 中配置。即使在 webpack://. 文件夹，只显示第一次加载的微服务中的代码。

我想，我可以独立运行每个微服务并以这种方式进行调试。但是由于服务 1 可能会触发服务 2 中的事件，因此调试 wohle 应用程序更合适。

有谁知道如何调试这样的应用程序？

标签： javascriptreactjsdebuggingwebpackmicroservices

解决方案

我找到了答案：

我首先通过“设置”->“目录”排除了每个微服务的每个构建文件夹，如下所述： https ://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ 另外我在设置中也将每个 src 文件夹标记为源文件夹。

在 JavaScript 调试作业中，然后我通过分配远程 URL“webpack:///src”来映射每个 src 文件夹（这实际上对于 Webstorm 2017+ 来说是不必要的，并且只有一个 src 文件夹）。最后，我将远程 URL“ http://myapp.com ”分配给了根文件夹。

现在看起来像这样：

本地文件的远程 URL

就这样。当我运行 Debug Job 并且在不同的服务中有多个断点时，我可以直接在 IDE 和相应的 js 文件（而不是 bundle.js）中进行调试。

推荐阅读