WebStorm + webpacker debugging

Question

Hallo StackOverflow-Community!

Mein Team arbeitet an einem Ruby on Rails Projekt, bei dem einige Teile in Reaktion geschrieben werden. Wir verwenden webpacker gem, um js-Dateien zu Paketen zu bündeln.

Ich versuche WebStorm einzurichten, um mit unserem Projekt zu arbeiten, aber ich habe Probleme mit dem Debugger - Webstorm trifft keine Haltepunkte. Ich starte rails s und ./bin/webpack-dev-server in separaten Terminal-Instanzen, installierte Chrome-Erweiterung und erstellte JavaScript-Debug-Konfiguration und zeigte auf die Ansicht, wo sich die App befindet (auf dem Port 3000). Außerdem wurde devtool: 'eval' zur Webpack-Konfiguration hinzugefügt. In den chrome dev tools sehe ich webpack:// Quelle und ich kann dort Haltepunkte erfolgreich setzen.

Wie wird dieses Werkzeug so konfiguriert, dass Haltepunkte funktionieren?

Answer 1

Normalerweise müssen Sie zum Debuggen von Apps, die mit webpack gebündelt sind, sicherstellen, dass die Quellkarten ordnungsgemäß generiert werden. Die beste Wahl ist hier devtool: 'source-map' (siehe https://webpack.js.org/configuration/devtool/). eval Quellkarten sind nicht genau und nicht zum Debuggen geeignet (Qualität ist "generierter Code" und nicht "Originalcode"). In einigen Fällen müssen Sie möglicherweise auch URL-Zuordnungen angeben - siehe https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ für weitere Informationen. Aber es gibt keine generischen Anweisungen, die für jede einzelne Konfiguration funktionieren würden - da Sie Webpack auf viele verschiedene Arten konfigurieren können. Daher kann ich kaum genaue Schritte empfehlen, es sei denn, Sie geben ein Projekt an, das Sie versuchen zu debuggen