是否有可能 运行 React.js 在编辑器中比在网络浏览器中调试器
Is it possible to run React.js debugger in editor than in web browser
我想通过在 WebStorm 而不是我的网络浏览器中添加断点来调试我的 React.js 项目。
可能吗？如果是，如何？
运行 npm start 在开发模式下获取应用程序 运行。
您可以在终端中执行此操作，也可以通过在 WebStorm 中双击 npm 工具 window 中的任务来执行此操作。
等到应用程序编译完成并且 Webpack 开发服务器准备就绪。在浏览器中打开http://localhost:3000/查看。
在 WebStorm 中创建一个新的 JavaScript 调试配置（菜单 运行 – 编辑配置… – 添加 – JavaScript调试)。将 http://localhost:3000/ 粘贴到 URL 字段中。
在 WebStorm 2017.1+
无需额外配置：转到第5步！
- 在 WebStorm 2016 中（.1、.2 和 .3）
在开发服务器上配置文件系统中的文件与源映射中指定的路径之间的映射。这是帮助 WebStorm 正确解析源映射所必需的。
映射应该在 src 文件夹和 webpack:///src
之间
如果您想知道我们如何获得此映射，请查看 http://localhost:3000/static/js/bundle.js.map 文件。这是包含已编译应用程序源代码的包的源映射文件。搜索 index.js，主应用程序的文件；它的路径是 webpack:///src/index.js
保存配置，在代码中放置断点并通过单击 IDE 右上角配置列表旁边的调试按钮启动新的调试会话。
遇到断点后，转到 IDE 中的调试器工具 window。您可以浏览调用堆栈和变量、单步执行代码、设置观察器、评估变量以及您在调试时通常会做的其他事情。
此应用默认使用 Webpack 热模块替换，这意味着当开发服务器为 运行 时，如果您更改任何源文件并点击保存，应用将自动重新加载。这也适用于 WebStorm 调试器！
请注意这些已知限制：
当您第一次在调试会话下打开应用程序时，放置在页面加载时执行的代码中的断点可能不会命中。原因是 IDE 需要从浏览器获取源映射，以便能够在您放置在原始源中的断点处停止，并且只有在页面至少完全加载一次后才会发生.解决方法是在浏览器中重新加载页面。
Create React App 中的 Webpack 生成 cheap-module-source-map 类型的源映射。这种源映射并不能保证最精确的调试体验。我们建议使用 devtool：'source-map' 要更改应用程序的 Webpack 配置，“弹出”应用程序（请参阅 Create React App 手册了解更多信息）。
我想通过在 WebStorm 而不是我的网络浏览器中添加断点来调试我的 React.js 项目。
可能吗？如果是，如何？
运行
npm start在开发模式下获取应用程序 运行。 您可以在终端中执行此操作，也可以通过在 WebStorm 中双击 npm 工具 window 中的任务来执行此操作。等到应用程序编译完成并且 Webpack 开发服务器准备就绪。在浏览器中打开http://localhost:3000/查看。
在 WebStorm 中创建一个新的 JavaScript 调试配置（菜单 运行 – 编辑配置… – 添加 – JavaScript调试)。将 http://localhost:3000/ 粘贴到 URL 字段中。
在 WebStorm 2017.1+
无需额外配置：转到第5步！
- 在 WebStorm 2016 中（.1、.2 和 .3）
在开发服务器上配置文件系统中的文件与源映射中指定的路径之间的映射。这是帮助 WebStorm 正确解析源映射所必需的。
映射应该在 src 文件夹和 webpack:///src
如果您想知道我们如何获得此映射，请查看 http://localhost:3000/static/js/bundle.js.map 文件。这是包含已编译应用程序源代码的包的源映射文件。搜索 index.js，主应用程序的文件；它的路径是 webpack:///src/index.js
保存配置，在代码中放置断点并通过单击 IDE 右上角配置列表旁边的调试按钮启动新的调试会话。
遇到断点后，转到 IDE 中的调试器工具 window。您可以浏览调用堆栈和变量、单步执行代码、设置观察器、评估变量以及您在调试时通常会做的其他事情。
此应用默认使用 Webpack 热模块替换，这意味着当开发服务器为 运行 时，如果您更改任何源文件并点击保存，应用将自动重新加载。这也适用于 WebStorm 调试器！
请注意这些已知限制：
当您第一次在调试会话下打开应用程序时，放置在页面加载时执行的代码中的断点可能不会命中。原因是 IDE 需要从浏览器获取源映射，以便能够在您放置在原始源中的断点处停止，并且只有在页面至少完全加载一次后才会发生.解决方法是在浏览器中重新加载页面。 Create React App 中的 Webpack 生成 cheap-module-source-map 类型的源映射。这种源映射并不能保证最精确的调试体验。我们建议使用 devtool：'source-map' 要更改应用程序的 Webpack 配置，“弹出”应用程序（请参阅 Create React App 手册了解更多信息）。