如何在WebStorm中调试React Express Webpack应用

Question

我正在尝试调试react-express应用程序的后端。 我正在使用webpack进行捆绑。

如何在WebStorm上编辑配置，以便可以调试前端和后端？ 我正在使用WebStorm 2016。

Answer 1

您需要创建并启动Node.js运行/调试配置来调试服务器端代码，并为客户端代码创建并启动JavaScript调试配置。

在JavaScript文件字段中的Node.js配置中，您需要指定启动服务器的文件的路径。

在“ URL”字段的JavaScript配置中，指定运行服务器的URL。 您可能还需要配置本地路径和远程URL之间的映射：最有可能应该在组件所在的文件夹与webpack：///之间。 （有关更多详细信息，请参见此答案 ）。

还要确保在Webpack配置中具有dev-tools: 'source-map' 。

Answer 2

浏览了WebStrom上的一些文档，最后设法使其正常运行。 首先选择Edit Configurations（编辑配置），然后会弹出一个菜单，可让您编辑Run / Debug Configurations（运行/调试配置） 。 单击左侧的+按钮，然后添加一个节点js。 然后，将节点解释器从默认（本地）node_modules更改为项目依赖项内的babel节点。 例如〜/ MyWork / Project / node_modules / .bin / babel-node 。 然后添加--presets = babel-preset-es2015作为节点参数 。 填写其余配置，然后单击保存并运行项目。

这是一个例子：