尝试为create-react-app设置WebStorm IDE JavaScript调试器时出现404错误

Question

遵循标题为"Debugging React apps created with Create React App in WebStorm"的文章时，调试器说它已连接到JetBrains IDE Chrome扩展程序，但是当使用端口3000和尝试使用默认调试端口时，我无法获得要执行的断点63342显示404错误。

---

这是我尝试调试时在http://recordit.co/MQ3LICuUIc

中在Chrome和Webstorm 2016.2 IDE中的设置的记录。

---

已采取的步骤：

我创建了一个新的JS调试配置，名称为“ ERS ​​React Debug”，浏览器设置为Chrome，并尝试在配置中使用以下URL：

http://localhost:3000/

http://localhost:3000/ers_react/public/index.html

http://localhost:63342/ers_react/public/index.html

（我观看的YT视频使用了调试端口，这是我录制的内容）

我还按照本文的建议设置了到webpack：/// src的映射。

Answer 1

使用create-react-app创建的默认ReactJS应用旨在托管在以react-scripts start开头的webpack服务器上，该服务器将构建应用并启动服务器。您将无法在简单的内置网络服务器（localhost:63342）上打开此应用程序。

要能够调试现代React应用，您需要将Webstorm升级到最新版本-调试将立即可用。对于Webstorm 2016.2，您可以尝试指定URL映射...对于"react-scripts": "1.0.17"，它应该是http://localhost:3000/static/js/full/path to project，就像http://localhost:3000/static/js/C:/WebstormProjects/untitled如果项目路径是C:/WebstormProjects/untitled应该可以工作：

请注意，您需要刷新浏览器页面以获取在pagfe加载时执行的代码中的断点