如何在WebStorm中debuggingReact Express Webpack应用程序

我试图debugging反应快递应用程序的后端。 我正在使用webpack捆绑。

如何在WebStorm上编辑configuration,以便我可以debugging前端和后端? 我正在使用WebStorm 2016。

您需要创build并启动Node.js运行/debuggingconfiguration来debugging您的服务器端代码,并为客户端代码创build并启动JavaScriptdebuggingconfiguration。

在JavaScript文件字段中的Node.jsconfiguration中,您需要指定启动服务器的文件的path。

在URL字段中的JavaScriptconfiguration中指定您的服务器正在运行的URL。 您可能还需要configuration本地path和远程URL之间的映射:这很可能应该位于组件所在的文件夹和webpack:///之间。 (更多细节见这个答案 )。

还要确保在Webpackconfiguration中有dev-tools: 'source-map'

通过WebStrom的一些文件,并最终设法得到它的工作。 首先select编辑configuration,然后popup一个菜单,这将允许您编辑运行/debuggingconfiguration 。 点击左侧的+button,添加一个节点js。 从那改变了Node解释器从默认(本地)node_modules到你的项目依赖关系中的babel节点。 例如〜/ MyWork / Project / node_modules / .bin / babel-node 。 然后添加–presets = babel-preset-es2015作为节点参数 。 填写其余的configuration,然后点击保存并运行项目。

这里是一个例子: 在这里输入图像说明