Wie debugge ich Webpack-dev-server (im Speicher) mit WebStorm?

8

Laut WebStorm erfordern sie das Debuggen gegen ein dist-Verzeichnis wie in:   Ссылка

Nach dem von Webpack empfohlenen Entwicklungsprozess sollten wir jedoch webpack-dev-server ausführen, also alles im Speicher wie in

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

also gibt es kein dist-Verzeichnis, das Beispiele beitragt, die gepostet wurden @: Ссылка

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

Zu diesem Projekt verwende ich:

Ссылка

tx

Sean

    
born2net 12.01.2016, 19:32
quelle

4 Antworten

4

Gegenwärtig benötigt WebStorm das erstellte Bundle + SourceMap von WebPack, um es zu analysieren und den tatsächlichen Breakpoint zu finden .

Kurz gesagt, Sie können WebPack-Anwendungen nicht nur mit dem WebPack DevServer debuggen. Sie können jedoch den normalen WebPack-Build mit Dateiüberwachung parallel dazu ausführen: '

    
Christian Ulbrich 18.05.2016 09:35
quelle
2

Wie Sie wissen, müssen Sie ein Verteilungs- / Produktionspaket mit Quellzuordnungen erstellen und dieses dann zum Debuggen in WebStorm verwenden. 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 schätze, was ich für Ihren Fall sage ... Sie können den Dev-Server laufen lassen, während Sie gleichzeitig eine Art automatischen Build mit Quellkarten haben, die genau zur gleichen Zeit ausgeführt werden Verwenden Sie den Debugger an. Dies kann jedoch sehr intensiv sein und hängt von Ihrem Speicher und Ihrer Rechenleistung ab.

    
Gabriel Kunkel 12.01.2016 19:40
quelle
2

Ich habe am Ende den Live-Server Ссылка verwendet und bin diesem Tutorial gefolgt, habe gearbeitet ... Ссылка (kann einfach nicht den eingebauten Server im Webpack verwenden, aber das ist ok)

    
born2net 13.01.2016 16:32
quelle
0

Ich würde hinzufügen, dass Sie die Anweisung

setzen können

Debugger;

in Ihren Javascript / Typescript-Dateien auch in Framework-Dateien von eckigen oder vue2 wie * .vue

Auch wenn Ihre Pfadzuordnungen zu URL nicht funktionieren, wird es trotzdem ausgeführt.

    
1P0 20.12.2017 19:42
quelle