嘗試為create-react-app設置WebStorm IDE JavaScript調試器時出現404錯誤

Question

遵循標題為“調試在WebStorm中使用Create React App創建的React應用程序”的文章時 ，調試器說它已連接到JetBrains IDE Chrome擴展程序，但是在使用端口3000和嘗試使用端口時，我無法執行斷點默認調試端口63342會顯示404錯誤。

---

這是嘗試調試時在Chrome和Webstorm 2016.2 IDE中我的設置​​的記錄： http ://recordit.co/MQ3LICuUIc

---

采取的步驟：

我已經創建了一個新的JS調試配置，名稱為“ ERS ​​React Debug”，瀏覽器設置為Chrome，並且嘗試在配置中使用以下網址：

HTTP：//本地主機：3000 /

HTTP：//本地主機：3000 / ers_react /公/ index.html的

HTTP：//本地主機：63342 / ers_react /公/ index.html的

（我觀看的YT視頻使用了調試端口，這是我錄制的內容）

我還按照本文的建議將映射設置為webpack：/// src。

Answer 1

使用create-react-app默認ReactJS應用旨在托管在以react-scripts start webpack服務器上，以構建應用並啟動服務器。 您將無法在簡單的內置Web服務器（ localhost:63342 ）上打開此應用程序。

為了能夠調試現代的React應用程序，您需要將Webstorm升級到最新版本-調試將立即可用。 Fot 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加載時執行的代碼中的斷點