Node.js 是否可以在编辑器中而不是在web浏览器中运行React.js调试器

我想通过在WebStorm中而不是在web浏览器中添加断点来调试React.js项目

可能吗？如果是，如何进行

运行

npm start

以使应用程序在开发模式下运行。 您可以在终端中或通过双击WebStorm中npm工具窗口中的任务来执行此操作

等待应用程序编译完毕，Webpack dev服务器准备就绪。打开以在浏览器中查看

在WebStorm中创建一个新的JavaScript调试配置（菜单运行–编辑配置…–添加–JavaScript调试）。粘贴到URL字段中

在WebStorm 2017.1+

无需额外配置：转至步骤5

在WebStorm 2016中（.1、.2和.3）

配置文件系统中的文件与dev服务器上源映射中指定的路径之间的映射。这是帮助WebStorm正确解析源映射所必需的

映射应该在

src

文件夹和

webpack:///src

如果您想知道我们是如何得到这个映射的，请检查文件。这是包含已编译应用程序源代码的捆绑包的源映射文件。搜索主应用程序文件index.js；它的路径是webpack:///src/index.js

保存配置，在代码中放置断点，并通过单击IDE右上角配置列表旁边的调试按钮启动新的调试会话

命中断点后，转到IDE中的调试器工具窗口。您可以探索调用堆栈和变量、逐步完成代码、设置观察程序、评估变量以及调试时通常执行的其他操作

默认情况下，此应用程序正在使用Webpack热模块替换，这意味着当开发服务器运行时，如果您更改任何源文件并单击“保存”，应用程序将自动重新加载。这也与WebStorm调试器一起工作

请注意这些已知的限制：

首次在调试会话下打开应用程序时，页面加载时执行的代码中的断点可能不会命中。原因是IDE需要从浏览器中获取源映射，以便能够在您放置在原始源中的断点上停止，并且只有在页面至少完全加载一次后才会发生这种情况。作为解决方法，请在浏览器中重新加载页面。 CreateReact应用程序中的Webpack生成廉价模块源映射类型的源映射。这种源代码映射不能保证获得最精确的调试体验。我们建议使用devtool:“源地图”更改应用程序的网页配置，“弹出”应用程序（有关详细信息，请参阅创建React应用程序手册）