如何使用WebStorm調試Webpack-dev-server（在內存中）？

Question

根據WebStorm，它們要求我們根據以下內容中指定的dist目錄進行調試： https ：//blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

但是，根據Webpack建議的開發過程，我們應該運行webpack-dev-server，所以它的所有內存都在：

webpack-dev-server -inline -progress -colors -display-error-details -display-cached -hot -port = 3000

所以沒有dist目錄，這個例子發布了@： https ：//blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

有沒有辦法讓webpack-dev-server使用dist dir，這樣可以將WebStorm映射到它，這樣我們就可以使用源映射進行實時調試了？

僅供參考我這是我用來測試的項目：

https://github.com/ocombe/ng2-webpack

TX

肖恩

Answer 1

目前，WebStorm 需要從WebPack創建的Bundle + SourceMap來分析它並找到實際的斷點。

簡而言之，您無法 僅使用WebPack DevServer調試WebPack應用程序。 但是，您可以運行正常的WebPack構建，並與文件並行查看：`

Answer 2

如您所知，您必須使用源映射創建分發/生產捆綁包，然后在WebStorm中使用它進行調試。 就個人而言，當我運行webpack-dev-server時，我用Karma運行測試。 可以使用調試器運行Karma測試，這通常可以滿足我的任何調試需求，而webpack-dev-server提供我的“手動測試”以查看我的工作情況。

我想我的意思是你的情況......你可以讓dev服務器運行，同時，有一些自動構建，源代碼地圖在你可以運行的同一時間運行並使用調試器上。 這可能是密集的，因此它取決於您的內存和處理能力。

Answer 3

我最終使用了live-server https://github.com/tapio/live-server並按照本教程進行了操作... https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications -in-webstorm / （只是不能在webpack中使用內置服務器，但沒關系）

Answer 4

我想補充一點，你可以把聲明

調試器;

在你的javascript / typescript文件中甚至在angular或vue2的框架文件中，如* .vue

因此，即使您的路徑映射到URL不起作用，它仍然會步進。