新手：从Intellij执行/调试react/redux应用

我有一个简单的react/redux应用程序，可以通过npm start从命令行运行，并从浏览器中进行调试，但是我想继续使用Intellij进行开发。不幸的是，考虑到我的Web开发经验水平，snippets的建议不能提供足够的整体背景，无法提供很大帮助。而且我还没有找到一个简单的示例应用程序来用作确定过程的模式。

主要问题：我可以在Intellij中打开应用程序目录结构，查看我的小应用程序的所有文件，并进行正确构建，因此我需要创建一个运行配置。我应该使用哪个配置模板，以及如何设置关联的参数，以便可以从Intellij运行和调试它？

谢谢！

我发现了两种在 Intellij Idea 中运行 React-app 的方法，但它有两个不同的缺点：

• 在第一种情况下，Idea 不能用作调试器


• 第二，我们需要手动运行“npm start”。如果我们需要重新运行'npm start'，我们需要停止它。该端口将仍在使用中，我们将在配置中指定新端口并在 npm 中从头开始启动另一个端口以成功将其用作调试器；

1. add new configuration: Javascript Debug
name: react-app
URL: http://192.168.1.106:3000/
Browser: Chrome


Script before launch: Run npm script [reactapp-directory/package.json]
|- package.json: ..../reactapp-directory/package.json
|- Command: start
|- Node interpreter: Project node(/usr/bin/node) 10.19.0
|- Package manager: Project node(/usr/bin/npm 6.14.4


保存更改
2. 打开你的脚本并添加调试断点
3. 然后点击“调试”按钮。

（我已经将 issue-ticket in the jetbrains support
想法）：

1. Idea 通过 set npm start 成功运行应用


2. 使用指定的 url http://192.168.1.106:3000/ 打开浏览器新标签


3. 在断点处停止

第一：它执行前两步（

• 
  
  
  
  1. 使用 set npm start 成功运行应用
  
  
  
  


• 
  
  
  
  2. 使用指定的 url http://192.168.1.106:3000/ 打开浏览器新标签
  
  
  
  

) 但不能作为调试器，所以我们需要使用浏览器 DevTool 来调试

第二：要使内置调试器工作，您应该更改运行步骤：

• 
  
  
  
  1. 自己从 shell 运行“npm start”
  
  
  
  

• 
  
  
  
  2. 使用设置的配置点击“调试”
  
  
  
  


• 
  
  
  
  3. 从配置中删除启动前的脚本
     
  
  
  
  

或

run 查看正在运行的脚本与之前的 npm start one 冲突，您需要按“n”按钮拒绝它；

• 
  
  
  
  4. Idea 打开带有指定 url 的新标签页并成功停在所选的调试点
  
  
  
  

文档提供了足够的信息，从...开始，您需要使用npm start来构建和启动应用程序（可以在IDEA中通过在编辑器中打开应用程序package.json并单击start脚本左侧装订线中的>运行图标）。然后，您必须创建一个新的 Javascript调试配置：选择运行|编辑配置，单击添加图标，然后从列表中选择 Javascript调试。在 URL 字段中，输入通常用于在浏览器中打开应用程序的URL（http://localhost:3000/或类似的URL）。点击调试

使用您的示例应用程序：

• 选择 npm start 运行配置，然后按 Run


• 选择 Debug Application 配置，然后按 Debug ：

请参见https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/

我找到了最简单的方法，可以轻松实现上述所有目标。在 Webstorm 上打开终端并使用 npm start 正常启动您的应用程序，如下所示。

npm start


在 Mac 上按 cmd + shift 单击链接，在 Windows 或 Linux 上使用 Ctrl + Shift 并单击。这将打开调试会话并观察所有断点