Come eseguire il debug di Webpack-dev-server (in memoria) con WebStorm?

Question

Come per WebStorm hanno bisogno che noi DEBUG contro una directory dist come specificato: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

tuttavia, come per Webpack raccomandato processo di sviluppo, che dovrebbe essere in esecuzione webpack-dev-server, in modo suo tutto nella memoria come in :

webpack-dev-server di -inline registrare progressi -colors -display-error-dettagli -display-cache-Hot-port = 3000

quindi non c'è directory dist che contridicts esempi postato @: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/

C'è un modo per far sì che webpack-dev-server utilizzi dist dir in modo che WebStorm possa essere mappato su di esso in modo da poter utilizzare le mappe sorgente per il debug live?

FYI Questo è il progetto che sto usando per prova:

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

tx

Sean

Answer 1

Come sapete, si dovrà creare un pacchetto di distribuzione/produzione con la fonte mappe e quindi usarlo per il debug in WebStorm. Personalmente, eseguo test con Karma mentre eseguo il webpack-dev-server. I test del karma possono essere eseguiti con il debugger e di solito soddisfano le mie esigenze di debug, mentre il webpack-dev-server fornisce il mio "test manuale" per vedere come sto.

Immagino quello che sto dicendo per il tuo caso ... puoi far funzionare il server di sviluppo mentre, allo stesso tempo, hai un qualche tipo di build automatizzata con mappe di origine in esecuzione allo stesso tempo che puoi eseguire e usa il debugger su. Questo può essere intenso, tuttavia dipende dalla memoria e dalla potenza di elaborazione.

Answer 2

ho finito per usare live-server di https://github.com/tapio/live-server e seguirono questo tutorial, lavorato ... https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/ (proprio non può utilizzare il costruito nel server webpack, ma va bene)

Answer 3

Attualmente WebStorm bisogno il creato Bundle + SourceMap da WebPack per analizzarlo e trovare il Breakpoint effettivo.

Così, in breve, voi non can debug di applicazioni WebPack solo con la WebPack devserver. Tuttavia è possibile eseguire il normale WebPack costruire con file di guardare in parallelo ad esso: `

Answer 4

Vorrei aggiungere che si può mettere la dichiarazione

debugger;

in javascript/file dattiloscritto anche nelle file del framework di angolare o vue2 come * .vue

Quindi, anche se le mappature di percorso a URL non funzionano, si farà un passo in ogni caso.