2016-01-12 5 views
8

Wie pro WebStorm sie verlangen, dass wir ein dist-Verzeichnis debuggen gegen wie angegeben in: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/Wie Debuggen Webpack-dev-server (in Arbeitsspeicher) mit WebStorm?

jedoch nach Webpack Entwicklungsprozess empfohlen, sollten wir webpack-dev-Server ausgeführt werden, so dass sie alle im Speicher als in :

webpack-dev-Server -inline -progress -Farben -Display-Fehler-Details -Display-cached -hot -port = 3000

so gibt es kein dist-Verzeichnis ist, die Beispiele geschrieben contridicts @: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

Gibt es eine Möglichkeit, webpack-dev-server dist zu verwenden, damit WebStorm diesem zugeordnet werden kann, so dass wir Quellkarten für Live-Debuggen verwenden können?

FYI ist dies das Projekt, das ich zu Test bin mit:

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

tx

Sean

Antwort

2

Wie Sie wissen, werden Sie eine Verteilung/Produktion Bundle mit Quelle erstellen müssen Maps und verwenden Sie diese dann zum Debuggen in WebStorm. Ich persönlich führe Tests mit Karma aus, während ich den webpack-dev-server laufen lasse. Karma-Tests können mit dem Debugger ausgeführt werden und erfüllen normalerweise alle meine Debugging-Anforderungen, während der Webpack-Dev-Server meinen "manuellen Test" anbietet, um zu sehen, wie es mir geht.

Ich denke, was ich für Ihren Fall sage ... Sie können den Dev-Server laufen lassen, während Sie gleichzeitig eine Art automatisierten Build mit Source Maps haben, die genau zur gleichen Zeit ausgeführt werden und verwende den Debugger an. Dies kann jedoch sehr intensiv sein und hängt von Ihrer Speicher- und Verarbeitungsleistung ab.

+0

und Sie debuggen mit Haltepunkten in Webstorm? – born2net

+0

Ja, während ich meinen Karma Task Runner benutze. Ich weiß nicht, ob Sie Tests verwenden, aber deshalb stelle ich mir vor, dass Sie einen Prozess zur gleichen Zeit ausführen können, der debuggt werden kann, selbst wenn der Dev-Server das nicht kann. –

+0

Aktualisierte Antwort, hoffentlich für bessere Klarheit. –

4

Derzeit WebStorm muss die erstellt Bundle + SourceMap von WebPack zu analysieren und finden den tatsächlichen Breakpoint.

Also kurz gesagt, Sie kann nicht Debug WebPack Anwendungen nur mit dem WebPack devserver. Sie können jedoch die normale WebPack bauen mit Datei gerade parallel zu ihm laufen: `

0

Ich möchte hinzufügen, dass Sie die Anweisung setzen können

Debugger;

in Ihrem Javascript/Typoskript-Dateien auch in Framework-Dateien von eckig oder vue2 wie * .vue

Also selbst wenn Ihre Pfadzuordnungen zu URL nicht funktionieren, es trotzdem Schritt wird.

Verwandte Themen