WebStorm中的Debug React忽略了使用webpack-dev-server的斷點

所以，我使用WebStorm來開發一個帶有webpack的React應用程序，通常我只在控制檯中運行webpack-dev-server，服務器位於8081端口，我打開瀏覽器，請訪問localhost:8081//build，並使用熱重新加載。WebStorm中的Debug React忽略了使用webpack-dev-server的斷點

今天，我想調試深入與WebStorm調試器的代碼，我以前從來沒有使用破發點，讓我去這個頁面https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/

雖然我沒有安裝create-react-app，因爲我的項目是不是由生成該模塊，我用webpack.config.js和package.json手動創建項目，我不知道如何生成一個現有的項目。

其次，我沒有運行npm start作爲指令，我也通過了這部分，因爲我認爲web-dev-server已經是服務器了，我不需要另一個服務器。

然後我按照這裏的指示創建了一個帶有「localhost：8081/build」url的調試配置，因爲有webpack-dev-server位置。

最後我試圖設置「調試器 - 內置服務器端口」爲8081，我還爲Chrome安裝了JetBrains IDE支持插件，並嘗試將端口設置爲8081。但是WebStorm告訴我這個端口不是免費的，而且Chrome工具欄上的插件現在是灰色的。

然後我認爲插件端口和調試器端口沒有關聯webpack-dev-server，只有調試配置關聯，但這些想法都是猜測，因爲我真的不明白。

最後我運行調試，應用程序索引頁面打開，它表示JetBrains IDE支持正在調試，我修改了任何文件並保存它將熱重新加載，WebStorm中的控制檯顯示Chrome控制檯中的結果，似乎所有的工作都很好，除了斷點之外，它們在WebStorm的調試器工具窗口中都被忽略，就像它們不存在一樣，框架窗口顯示「框架不可用」，「變量」窗口顯示藍色圓形圖標，後面跟着「連接到JetBrains Chrome擴展「這就是全部，沒有變數顯示在那裏。

對不起，我不明白WebStorm調試器和斷點調試都很好，這是我第一次不知道如何把東西弄到一起。

我應該明確地使用create-react-app來生成一個項目（請不要），或者有沒有辦法讓所有這些工作？

來源

2017-07-24 Fadeoc Khaos

最後，我試圖設置「調試器 - 內置服務器 - 口」到8081，我也安裝JetBrains的IDE插件支持Chrome和試圖設置的端口8081無論是。但WebStorm告訴我，該端口不是免費，現在Chrome工具欄上的插件也是灰色的。

請回其設置爲默認 - 端口指定有一個端口IDE是在開始打開調試/服務靜態文件，它無關，與你的應用程序在

託管服務器的端口

似乎除了斷點所有的偉大工程，他們都忽略

你需要確保sourcemaps正確生成（devtool: 'source-map'是最優先選擇）和（可能）指定遠程URL映射在你的調試中配置（檢查https://blog.jetbrains.com/webstorm/2017/01/debugging-react-apps/,4.在WebStorm 2016（.1，.2和.3）部分中提供一些提示）。

如果還是不行，請創建一個支持票獲得有關設置調試

來源

2017-07-24 15:00:38 lena

感謝您的幫助，我會提交了票，我沒加上「devtool：‘源圖’」選項在webpack.config.js中的'module.exports'對象內，而且我使用Webstorm最新的AKA 2017.2，並且該指令說得很好。 –

WebStorm中的Debug React忽略了使用webpack-dev-server的斷點

回答

相關問題