Come eseguire il debug di Javascript in webstorm quando gulp sta servendo l'applicazione

Question

In Webstorm, eseguo gulp service che avvia localhost: 9000 stub angular project generato con yo. Sto cercando di eseguire il debug di codice JavaScript e questo è quello che ho provato:

• corro sorso come un compito di debug, posso solo le linee di file di debug gulp
• provo a fare funzionare gulp servire prima di JavaScript, è inizia a servire e Webstorm non arriva mai a lanciare la sua sessione di debug JavaScript
• Cerco di eseguire debug JavaScript, non ottengo punti di interruzione all'interno del mio codice.

Qual è il flusso di lavoro in questa situazione?

PS. Non sto cercando di eseguire il debug del codice all'interno degli strumenti di sviluppo di Chrome, voglio che i miei punti di interruzione funzionino in Webstorm

Answer 1

Nel tuo Javascript - inserisci debugger; tra due delle tue linee e apri il tuo Developer Tools in Chrome. Quando aggiorni la pagina - se lo script è in esecuzione, dovrebbe fermarsi dove inserisci lo debugger; e sarai in grado di passare il mouse su diverse variabili per vedere i loro valori. Strumento molto potente e basilare.

Inoltre, se non si desidera arrestare lo script, è possibile impostare console.log(variable); in modo che la console degli strumenti per gli sviluppatori stampi la variabile.

Esempio:

var somethingOrOther = function(){ 
var blah = 'foo'; 
console.log(blah);// to print to console 
debugger; // to stop script at this point and look around 
}; 

Non dimenticare di rimuovere il debugger; quando hai finito. Ti consiglio di usare jshint nel tuo sorso per assicurarti di non perdere questo tipo di cose.