‫Istruttore: In questo video,
‫impareremo a eseguire il debug di Node. JS perché, diciamocelo, ci saranno
‫sempre dei bug nel nostro codice, non importa
‫quanto stiamo attenti.
‫E quindi è bello avere uno strumento che ci aiuti
‫con il debug del nostro codice.
‫Ora non si tratta proprio di gestire gli errori con Express,
‫ma ho pensato che questo fosse un buon
‫punto del corso per presentarti uno strumento
‫di debug che potremmo poi usare per il resto del corso.
‫E ci sono diversi modi per eseguire il debug di Node. codice JS.
‫Ad esempio, potremmo usare il codice VS per questo.
‫Ma, in realtà, Google ha recentemente rilasciato uno strumento straordinario
‫che possiamo usare per eseguire il debug chiamato NDB, va bene?
‫Quindi passiamo all'altro nostro terminale qui e
‫quindi installiamo NDB.
‫E NDB, che sta per Node debugger, è in
‫realtà solo un pacchetto NPM.
‫Quindi NPM installa NDB.
‫Va bene,
‫e dovresti installarlo come pacchetto globale, ok?
‫E se utilizzi un Mac, potresti aver bisogno di autorizzazioni globali.
‫Quindi scrivi sudo qui davanti.
‫Oppure, se non sei affatto in grado di installarlo
‫globalmente, puoi sempre installarlo localmente come dipendenza
‫da morte.
‫Quindi proprio così, va bene?
‫Ad ogni modo, vai avanti e installa questo strumento ora.
‫Non lo
‫farò perché può essere un download piuttosto pesante, e
‫ora ci vuole un po' troppo tempo.
‫Ad ogni modo, non appena hai installato lo strumento,
‫passiamo al pacchetto. jason e
‫aggiungi un nuovo script qui, ok?
‫E lo chiamerò debug.
‫Bene?
‫E quindi il comando che vogliamo eseguire
‫qui è semplicemente NDB, quindi il debugger delle note e
‫poi di nuovo il nostro punto di
‫ingresso, Quindi, server. va bene?
‫E ora funzionerà, indipendentemente dal fatto
‫che tu abbia installato NDB localmente o globalmente.
‫Va bene, ora eseguiamo lo script.
‫E affinché
‫funzioni, dobbiamo effettivamente finire questo processo
‫perché fondamentalmente avvierà anche
‫il server e quindi proverà a
‫farlo sulla stessa porta
‫e ovviamente non funzionerà.
‫Quindi dobbiamo finire quello che è attualmente in
‫esecuzione e da qui possiamo eseguire il debug di NPM.
‫Va bene,
‫quindi ora
‫dovrebbe aprirsi una nuova finestra
‫di Chrome, quindi quello che viene
‫chiamato Chrome senza testa, ma non
‫è un vero Chrome.
‫Quindi vedrai l'icona di Chrome in basso qui
‫e anche qui nella barra dei
‫menu, ma in realtà questo è solo il debugger delle note.
‫Allora, cosa abbiamo qui?
‫Bene, sul lato sinistro, abbiamo il nostro file system completo.
‫Abbiamo anche accesso ai nostri script NPM qui
‫che possiamo effettivamente eseguire da qui.
‫Abbiamo anche una console e quindi qui
‫abbiamo i nostri soliti output con l'app in esecuzione
‫e la connessione al
‫database e abbiamo anche le schede delle prestazioni e
‫della memoria, che non useremo.
‫Bene, ora se hai familiarità con
‫il processo generale di
‫debug, allora tutto questo ti sarà abbastanza familiare.
‫Va bene, ma se non ti preoccupare
‫ti mostrerò un paio di
‫tecniche in questo video.
‫Va bene, comunque ora apriamo il nostro server. js.
‫E una cosa davvero sorprendente è
‫che possiamo effettivamente modificare i nostri file qui, quindi
‫proprio in questo debugger.
‫Quindi, per esempio, diciamo che troviamo un
‫bug e poi vogliamo correggerlo subito.
‫Possiamo farlo proprio qui nel debugger e
‫quindi aggiornerà il codice originale.
‫Quindi, solo per
‫testarlo, aggiungiamo un commento qui sotto.
‫Quindi, prova quindi premi command o control per salvare e poi quando
‫torniamo al nostro codice e apriamo
‫il server. js
‫vedrai che il commento è effettivamente qui.
‫Bene?
‫E se ora lo
‫eliminiamo da qui,
‫lo salviamo e lo
‫torniamo al debugger, allora sparirà anche da qui.
‫Ok, ma ora parliamo del debug stesso.
‫Direi che l'aspetto fondamentale del
‫debug è quello di impostare punti di interruzione.
‫Quindi i punti di interruzione sono fondamentalmente punti nel nostro
‫codice che possiamo definire qui nel
‫debugger, dove il nostro codice smetterà di funzionare.
‫Fondamentalmente si bloccherà nel tempo
‫e possiamo quindi dare un'occhiata a tutte le nostre variabili.
‫Ok, quindi sarà estremamente utile per
‫trovare alcuni bug.
‫Ora, in questo momento non c'è alcun
‫bug qui, ma aggiungiamo ancora un punto di interruzione.
‫E aggiungerò quel punto di interruzione qui in questa riga 21.
‫Quindi clicco qui su questa
‫riga e poi vedi questo indicatore verde, ok?
‫E quindi questo significa che il codice si fermerà
‫a questo punto quando lo eseguiremo, ok?
‫E in realtà puoi vederlo qui
‫sul lato destro anche nella scheda dei punti di interruzione qui.
‫Ora, la nostra applicazione è in
‫realtà già in esecuzione
‫a questo punto e sostanzialmente attende che arrivino le richieste.
‫E quindi quello che dobbiamo fare
‫qui è fare clic con il pulsante destro del mouse e quindi fare clic su Esegui questo script.
‫Ok, quindi in pratica eseguirà di
‫nuovo lo script qui.
‫Tutto ok?
‫E quindi eccoci qui.
‫Quindi vedi qui sul lato destro,
‫che dice in pausa sul punto di interruzione e
‫quindi tutto il codice che si trova sopra questo punto di
‫interruzione qui è già stato eseguito a questo punto.
‫E così ora possiamo dare un'occhiata alle variabili.
‫Ad esempio, possiamo passare il mouse su questa
‫variabile di porta e vediamo che è impostata su 3.000.
‫E in realtà colpisci anche questo posto qui
‫nel codice qui, va bene.
‫E poi il terzo modo di vederlo è
‫qui sul lato destro.
‫Quindi abbiamo un paio di schede fondamentalmente qui, quindi i
‫processi del nodo, l'orologio, lo stack di chiamate, che
‫non è molto importante per ora.
‫L'ambito, e quindi l'ambito è dove si trovano tutte
‫le nostre variabili, ok?
‫E quindi di nuovo qui, hai la porta impostata su 3.000.
‫Ok, e qui puoi anche vedere
‫le cinque variabili a cui abbiamo accesso
‫in tutti i moduli.
‫Ricordi quello dalla lezione sui modelli?
‫Quindi abbiamo il nome della
‫directory, abbiamo il nome del file, abbiamo la funzione
‫require, abbiamo il modulo e abbiamo l'esportazione.
‫Quindi ricorda, queste sono le
‫cinque variabili disponibili in ogni modulo.
‫E in realtà quando eseguiamo un
‫codice come questo nel debugger, possiamo vedere che il nostro intero
‫codice è in effetti racchiuso in questa funzione.
‫Destra?
‫Quindi questa funzione wrapper che
‫ci dà accesso a queste cinque variabili.
‫Bene, ora voglio anche dare un'occhiata alla
‫nostra variabile app, quindi fondamentalmente l'applicazione Express
‫che esportiamo dall'app. js, ricordalo.
‫Ed ecco davvero un sacco di
‫cose, ma quello che trovo
‫interessante è dare un'occhiata a questo router qui.
‫Ok, quindi nel router abbiamo lo stack.
‫Ok, quindi apriamolo un po' e quindi
‫questo stack qui è
‫fondamentalmente lo stack del middleware che abbiamo nella nostra applicazione.
‫Ok, per esempio qui abbiamo il nostro
‫jsonParser, abbiamo il codice che serve i file statici.
‫Dai un'occhiata qui nell'app. js quindi questo
‫express. statico.
‫Abbiamo anche il logger
‫qui che deriva dall'utilizzo di Morgan.
‫Poi hai queste due prossime funzioni
‫middleware, quindi
‫queste due qui, che sono anonime, quindi questa e questa
‫e forse possiamo dargli un'occhiata.
‫Ma non proprio.
‫Ok, non importa.
‫Quindi questo è solo per curiosità e
‫per mostrarti che
‫possiamo davvero dare un'occhiata al nostro stack di middleware, ok?
‫Poi finalmente abbiamo i nostri due router.
‫Bene?
‫Quindi, abbiamo il router e qui vedi effettivamente il
‫percorso per il quale si applica.
‫Quindi api/v1/tours giusto e quindi lo trovo davvero interessante.
‫Ovviamente abbiamo ancora gli utenti anche qui.
‫E così con questo puoi davvero dare un'occhiata a come
‫funziona l'applicazione Express dietro le quinte.
‫Bene?
‫Quindi chiudiamo tutto questo.
‫E l'altra cosa che volevo mostrarti
‫è qui nelle variabili
‫globali perché qui abbiamo la variabile di processo o
‫almeno dovremmo averla da qualche parte qui.
‫Sì, quindi eccolo qui.
‫Quindi qui abbiamo la variabile
‫di processo che è Remember, disponibile ovunque.
‫Ecco perché qui viene chiamata variabile globale.
‫Quindi lì dentro abbiamo il processo. env
‫e ricordare che qui
‫sono memorizzate tutte le nostre variabili d'ambiente.
‫E così in effetti qui abbiamo la nostra stringa
‫di database, abbiamo il database locale, la password e davvero
‫tutte le altre variabili di ambiente che abbiamo
‫definito nella nostra configurazione. n file.
‫Tutto ok?
‫Quindi cose davvero interessanti che possiamo dare un'occhiata qui.
‫Ma ora continuiamo con il nostro debug.
‫Bene?
‫Quindi abbiamo fermato il codice, l'abbiamo congelato
‫in tempo qui a questo punto, quindi alla riga 21.
‫Ok, quindi ora possiamo fare clic qui su questo pulsante,
‫per continuare effettivamente a eseguire il codice.
‫E poiché non abbiamo
‫più punti di interruzione, il codice
‫non si interromperà più e sostanzialmente terminerà l'esecuzione.
‫Quindi facciamolo.
‫E così ora la nostra applicazione è davvero in esecuzione.
‫Diamo un'occhiata a questo.
‫In Console, ok?
‫Quindi l'app in esecuzione sulla porta 3.000 e la connessione
‫al DB sono andate a buon fine, ovviamente.
‫Cos'è successo qui?
‫Bene, adesso
‫facciamo rapidamente una richiesta qui.
‫Quindi semplicemente uno per /tours e ora
‫abbiamo tutta questa spazzatura
‫qui e me ne occuperò in un secondo.
‫Va bene, e se ora torni alla nostra
‫console qui, ovviamente abbiamo tutto il codice che avevamo prima.
‫Ciao dal middleware e
‫poi come è effettivamente durata la query lunga.
‫Va bene, e ora, prima di fare
‫qualsiasi altra cosa, sbarazziamoci di questi tour spazzatura.
‫Quindi lo ricaricherò qui, e
‫immagino che sarà da qualche parte qui alla fine.
‫Quindi, prova qualunque cosa qui.
‫Quindi liberiamocene.
‫Questo è il tour segreto e in realtà voglio tenerlo qui.
‫Ma tutto da qui in poi non lo vogliamo più.
‫E quindi
‫sì, quindi ora siamo tornati ad avere solo
‫10 tour, proprio come prima.
‫Comunque ora impostiamo effettivamente un punto di interruzione
‫nella funzione che gestisce questa rotta.
‫Ok, quindi arriviamo alla nostra cartella dei controller e
‫lì abbiamo il controller del tour.
‫Bene?
‫E poi la funzione del gestore è ottenere tutti i tour.
‫Quindi per ora tutto ciò
‫che volevo fare è semplicemente impostare un punto
‫di interruzione qui in modo da poter dare un'occhiata a come appaiono
‫queste variabili dopo che la query è già stata eseguita.
‫Quindi questo codice qui otterrà i nostri tour
‫e quindi fermeremo
‫il codice sostanzialmente prima di inviarlo effettivamente come risposta.
‫Ok, quindi tutto ciò che dobbiamo fare è eseguire effettivamente la
‫richiesta perché ciò attiverà quella funzione.
‫Destra?
‫E così poiché abbiamo un punto di interruzione, torniamo automaticamente
‫a questa finestra qui e al punto in cui
‫il codice si è fermato.
‫Quindi, che tipo di variabili abbiamo qui?
‫Quindi vedete che abbiamo la richiesta e una
‫risposta, e abbiamo anche le
‫funzioni variabili e i tour, ovviamente.
‫Quindi diamo prima un'occhiata alla richiesta.
‫E anche qui, vedi che abbiamo davvero tutti i
‫tipi di cose.
‫Quindi abbiamo, baseurl, abbiamo il metodo, abbiamo ad
‫esempio request. query, che in questo
‫momento è vuota perché non abbiamo passato
‫alcuna stringa di
‫query, ma vedi che è davvero già qui.
‫Ok, e ora inizi a vedere quanto
‫può essere utile per eseguire il debug del nostro codice.
‫Quindi fondamentalmente per congelare il nostro codice in tempo invece di
‫dover fare tutte queste console. log che eravamo soliti fare fino
‫a questo punto.
‫Quindi, di solito, quando volevamo dare un'occhiata alla query, ad esempio,
‫facevamo un sacco di console. log e usalo per
‫scoprire un bug nel caso in cui qualcosa
‫non funzionasse.
‫Giusto, ma ora abbiamo questo fantastico strumento che può
‫aiutarci a evitare tutte queste console. log per
‫esempio.
‫Poi abbiamo anche la risposta, naturalmente.
‫E di nuovo vedi tutte queste proprietà e metodi che sono
‫lì, e non sono davvero interessanti per
‫noi ora.
‫Quello che volevo mostrarti è che a questo
‫punto abbiamo già i tour, ok?
‫Quindi abbiamo nove tour, quindi diamo un'occhiata a loro.
‫E sembra un po' strano qui, quindi per avere
‫accesso ai valori effettivi, dobbiamo fare clic qui, ok, quindi è
‫un po' strano.
‫Ma funziona ovviamente.
‫E così vedi che in effetti i nostri tour sono
‫già qui e ovviamente anche le funzionalità.
‫Quindi vedi qui che le funzionalità sono un'istanza
‫della classe delle funzionalità API proprio come l'abbiamo definita.
‫E lì dentro abbiamo la query e la query string.
‫Ottimo, ecco come diamo un'occhiata a tutte le variabili.
‫Ed è così che funzionano le parti
‫più importanti del debugger.
‫Ora per imparare qualcosa sul processo di debug stesso,
‫introduciamo un bug molto piccolo nel nostro codice e poi
‫diamo un'occhiata a come possiamo usare questi strumenti
‫che abbiamo qui per dare un'occhiata più approfondita
‫al nostro codice.
‫Quindi non riprenderò l'esecuzione
‫saltata per eseguire praticamente il resto del codice, ok?
‫Quindi dovrebbe essere fatto ora.
‫Quindi ora qui abbiamo tutte le risposte.
‫Quindi vedi che ci è voluto tutto questo tempo
‫qui, quindi tre minuti e 29 secondi, ma è
‫solo perché abbiamo messo in pausa l'esecuzione per così
‫tanto tempo.
‫Bene.
‫Ora veniamo al nostro codice qui.
‫Chiudiamo ciò che non ci serve più.
‫Quindi, in realtà nel nostro file delle funzionalità API, voglio
‫introdurre un piccolo bug qui nei campi limite.
‫Quindi diciamo che stavamo cercando di implementare
‫questo metodo qui, ma invece di unirci con uno spazio
‫qui, abbiamo dimenticato di inserirlo qui.
‫E quindi diciamo solo che ci siamo uniti
‫senza spazio, e quindi questo ci darebbe un risultato strano, giusto?
‫Quindi proviamolo davvero.
‫Quindi diciamo
‫campi e che volevamo solo
‫il nome e la durata, giusto?
‫Ora, prima di poter effettivamente inviare quella richiesta, rimuoviamo il
‫punto di interruzione qui.
‫Bene?
‫Inviata la richiesta, e ora in realtà non otteniamo
‫il nome e la durata.
‫Quindi facciamo finta che sia il
‫nostro bug ora e stiamo cercando di capire perché questo non funziona.
‫Bene?
‫Quindi andiamo al nostro debugger.
‫E sappiamo che l'errore deve probabilmente
‫essere da qualche parte nel nostro metodo dei campi limite.
‫E quindi fondamentalmente fermiamo l'esecuzione del codice a
‫questo punto, ok?
‫Perché è qui che verrà effettivamente chiamato questo metodo e
‫quindi da qui possiamo inserire quella funzione per
‫quel metodo.
‫Bene?
‫Quindi avviamo subito quella
‫richiesta, e ora torniamo automaticamente al nostro debugger.
‫Quindi a questo punto questa riga e questa riga
‫e questa riga di codice sono già state eseguite, quindi ora
‫usiamo lo strumento passo, ok?
‫Il passaggio che farà è che eseguirà fondamentalmente la
‫riga di codice successiva.
‫E in questo caso sarà all'interno del
‫metodo dei campi limite.
‫Quindi fai un passo e poi si sposterà direttamente in quella funzione.
‫Ok, diamo un'occhiata a cosa abbiamo qui.
‫Ad esempio questo. la stringa di query è la
‫durata della virgola del nome, quindi è corretto, giusto?
‫Ok, passiamo alla riga successiva.
‫Va bene, quindi è qui che sta realmente
‫accadendo questa operazione.
‫Poi il prossimo.
‫Diamo un'occhiata alle nostre variabili qui.
‫E così qui ora vediamo il campo, e quindi qui abbiamo il nostro bug.
‫Bene?
‫Quindi il problema è, ovviamente, che non c'è
‫spazio tra nome e durata.
‫Ed è per questo che non funziona.
‫Quindi i campi sono ovviamente definiti qui, e così
‫in questo modo possiamo trovare il nostro bug e correggerlo subito.
‫Quindi ricorda che il passaggio aggiunto
‫che facciamo qui si riflette immediatamente nel codice.
‫Quindi salvalo
‫e poi lo farà di nuovo.
‫Così posso continuare a fare un passo.
‫E così ora i campi sono corretti.
‫Quindi nome spazio durata.
‫Quindi la riga di codice successiva.
‫E ora entriamo nel metodo select sulla query.
‫Ma non siamo affatto interessati a questo, quindi
‫possiamo dire "esci dalla funzione attuale. " Bene?
‫Quindi quella selezione che pensavamo stesse eseguendo
‫questa funzione qui, ok?
‫Ma ovviamente non ci interessava, quindi
‫l'abbiamo lasciato e siamo passati alla riga successiva.
‫Quindi ora dobbiamo
‫restituire questo, la riga successiva e ancora.
‫Quindi ora siamo tornati al punto in cui eravamo, ma nella riga successiva.
‫Quindi continuiamo a farlo.
‫Quindi ora siamo a pagina
‫otto, ma non siamo molto interessati a
‫questa, quindi usciamo di nuovo dalla funzione corrente.
‫E ora siamo qui alla definizione dei tour.
‫Cosa che a questo punto non è ancora fatta.
‫E quindi diciamo di nuovo passo.
‫E quindi ora a questo punto i nostri tour dovrebbero essere definiti.
‫Va bene, quindi abbiamo i nostri nove tour qui.
‫Diamo un'occhiata a loro,
‫ed eccoli.
‫E in realtà hanno tutti i
‫dati, quindi non solo quello che abbiamo definito, ma in
‫realtà non ce l'ha.
‫Quindi in realtà abbiamo solo il nome e la durata,
‫quindi la durata, il nome e tutti gli altri
‫non sono definiti.
‫Quindi è solo perché abbiamo limitato una query solo a
‫questi due campi, ricordi?
‫Ora quello che volevo mostrarti è anche qui nelle
‫funzionalità, possiamo dare un'occhiata alla nostra query e qui abbiamo la proprietà dei
‫campi, ad esempio dove vediamo la durata impostata su
‫uno e il nome impostato su uno.
‫E quindi questi sono esattamente i due nomi che abbiamo selezionato.
‫Abbiamo anche queste opzioni
‫qui, che a questo punto è impostato per crearlo meno uno.
‫E quindi viene da qui.
‫Quindi questo qui.
‫Quindi fondamentalmente ciò che questo metodo qui, questo
‫metodo di ordinamento farà è aggiungere questa proprietà di ordinamento qui
‫a queste opzioni, ok?
‫E poi abbiamo anche il limite e il salto che ovviamente
‫vengono qui da pagina otto.
‫Bene?
‫Quindi ho pensato che anche questo fosse
‫interessante e sì, quindi il nostro codice ora è stato corretto e continuiamo a
‫farlo funzionare.
‫E così ora dovremmo avere il nostro risultato corretto.
‫Ora qui dice che non siamo riusciti a ottenere alcuna risposta,
‫e questo perché abbiamo impiegato troppo tempo per correggere il nostro codice.
‫Quindi abbiamo riscontrato un errore durante la connessione.
‫Ma se ora lo inviamo di
‫nuovo, e ora lo facciamo più velocemente.
‫O in realtà potremmo rimuovere completamente il nostro punto di interruzione.
‫Quindi continuiamo a
‫farlo funzionare, torniamo indietro e ora effettivamente otteniamo
‫la durata e anche il nome.
‫Questo perché abbiamo appena corretto il nostro
‫codice utilizzando il debugger NDB.
‫Così fantastico.
‫È uno strumento davvero straordinario e utile che
‫continueremo a utilizzare per il resto
‫del corso.
‫Forse non sempre, a volte è più veloce inserire semplicemente
‫un log in uscita dalla console.
‫Ma davvero, in alcuni casi più complicati, mi piace
‫usare questo tipo di strumento.