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

Question

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

可能吗？如果是，怎么办？

Answer 1

\n

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

\n

2. 等待应用程序编译完成并且 Webpack 开发服务器准备就绪。打开http://localhost:3000/即可查看。

\n

3. 在 WebStorm 中创建新的 JavaScript 调试配置（菜单“运行 \xe2\x80\x93 编辑配置\xe2\x80\xa6 \xe2\x80\x93 添加 \xe2\x80\x93 JavaScript 调试”）。粘贴http://localhost:3000/粘贴到 URL 字段中。

\n

4. 在 WebStorm 2017.1+ 中

\n

\n\n

无需额外配置：转到步骤 5！

\n\n

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

\n\n

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

\n\n

映射应该在src文件夹和webpack:///src

\n\n

如果您\xe2\x80\x99想知道我们如何获得此映射，请检查http://localhost:3000/static/js/bundle.js.map文件。这是包含已编译的应用程序源代码的捆绑包的源映射文件。搜索index.js，即主app\xe2\x80\x99s文件；它的路径是 webpack:///src/index.js

\n\n

\n

5. 保存配置，在代码中放置断点，然后单击 IDE 右上角配置列表旁边的“调试”按钮启动新的调试会话。

\n

6. 一旦命断点，就进入 IDE 中的调试器工具窗口。您可以探索调用堆栈和变量、单步执行代码、设置观察程序、评估变量以及调试时通常执行的其他操作。

\n

\n\n

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

\n\n

请注意这些已知的限制：

\n\n

当您第一次在调试会话下打开应用程序时，在页面加载时执行的代码中放置的断点可能不会被命中。原因是 IDE 需要从浏览器获取源映射，以便能够在您\xe2\x80\x99 放置在原始源中的断点处停止，并且只有在页面至少完全加载一次后才会发生这种情况。作为解决方法，请在浏览器中重新加载页面。\nCreate React App 中的 Webpack 会生成 Cheap-module-source-map 类型的源映射。这种源映射并不能保证最精确的调试体验。我们建议使用 devtool: \'source-map\' 要更改应用程序\xe2\x80\x99s Webpack 配置，\xe2\x80\x98eject\xe2\x80\x99 应用程序（请参阅创建 React 应用程序手册了解更多）。

\n