Trascrizione: (click per espandere)

salve a tutti in questo video vado a
parlare di debugging il debugging
praticamente capire dove è il bug nel
nostro codice quindi dove c'è il
l'errore dove c'è il problema può
capitare che mi ritrovo alla fine del
codice con un valore che inaspettato o
magari mi trovo che il codice c'ha
un errore da qualche parte eccetera
quindi io devo investigare dove dov'è il
problema
in inglese si dice fare debugging allora
andiamo a scrivere un po di codice e poi
vediamo come si può fare il debug e
allora qui metto un inizio poi crea un
paio di variabili x è uguale a 10
y uguale a 50 let z uguale mettiamo x+y
vogliamo fare il console.log di z e poi
possiamo fare anche z2
uguale z * z e poi possiamo
andare a fare un altro console.log in questo
caso la z2 possiamo metterci un ciclo
for let index = 0 index minore di tre e poi index
più che facciamo il console.log index e poi
mettiamo una fine ecco allora
io ho questo codice quali diciamo come
vedete funziona tutto perfettamente
però diciamo che c'è qualcosa che non va
mi trovo va alla fine che il valore è
inaspettato magari non so dovevo trovarmi
50 invece mi trovo 500 non so bene dove
sia il mio problema
come posso fare che il codice mi venga
eseguito solo fino a un certo punto e
poi venga bloccato dove dico io è poi
così posso vedere che valori come
funziona eccetera si usa una keyword che
si chiama debugger
eccolo qui adesso se io vado a salvare
il file come vedete chrome
intanto mi apre un'altra tab qui invece
di console mi apre source e la pagina
sta ancora caricando e come vedete in
pausa per debugger quindi cosa vuol dire
che chrome ha cominciato a eseguire il
tutto il mio codice però si è fermato
qui e come vedete qui in grandine un po
come vedete qui qui o il codice della
mia pagina e in questa riga qui il chrome
dice sono fermo a questa parola qui
debugger quindi questo codice non è ancora
stato eseguito infatti se io vado a
vedere la console
e ancora c'è solo inizio perché l'unico
output che è stato fatto è stato questo
qua è questo qui non è stato ancora
raggiunto
se io adesso voglio dire ok come sono
messo in questa posizione qui ho un
bello specchietto che mi dice guarda la
variabile x vale 10 la variabile y
vale 50 la variabile z vale 60 come
vedete qua adesso io se voglio andare
avanti clicco sul play qui e come vedete
tutto il resto del codice è stato
eseguito
qui ho tutte le mie i miei output e non
sta più caricando la pagina
la pagina ha finito di caricare io posso mettere nel
codice quanti debugger voglio quindi
posso mettere un debugger anche qui per
esempio lo mettiamo
vado a ricaricare la pagina e come
vedete ancora sono fermo al
primo debugger e qui ho solo inizio se
adesso vado a schiacciare play e quel mio
variabili
se io adesso da schiacciare play chrome
andrà a seguirmi il codice fino al
prossimo debugger eccolo qui e quindi
adesso io sono fermo qui adesso io posso
sapere anche quanto vale la mia
variabile z2 che vuole 3.600 e se vado a
vedere la mia console è ferma qui e poi
se io e schiaccio ancora play finisce il
codice ho tutti quanti i miei printing
bello bello però si è un po' noioso dover
stare lì a scrivere debugger nel codice
quindi diventa un po' noioso un po'
lungo eccetera cosa posso fare posso
farlo direttamente dentro a chrome
se adesso io apro la mia source qui e
diciamo che io voglio mettere un si
chiama break point voglio mettere un
break point qui basta solo che clicco e
automaticamente io ho inserito un break
point qui e possono mettere un break
point anche in questo ciclo for eccolo
qui se adesso io ricarico alla pagina
automaticamente chrome mi blocca
l'esecuzione del codice qui e mi dice
la x vale 10 la y vale 50 la z
non lo so ancora quanto vale perché non
ho ancora eseguito tutta questa riga
se adesso vado avanti ecco qua io mi
sono fermato qui e io ho tutte le altre
variabili dichiarate qui oggi a tutti i
valori
qui nella mia console ho gli output e
quindi sono sul mio ciclo for adesso io
click play e tutto quanto è stato
eseguito per togliere il break point
basta schiacciare un'altra volta
ecco qua cosa succede se io il break
point come in questo caso dentro un
ciclo for diciamo questo ciclo for ha tre
iterazioni cosa succede ogni volta devo
fare tac tac per ogni interazione alla terza
iterazione io finisco il mio ciclo for
e il mio codice finisce di eseguire
allora finché ci sono tre interazioni
vuoi dire vabbè posso schiacciare play
tre volte e tutto il fatto però se ho
100 iterazioni se ho 1000 iterazioni cosa
si può fare si può fare così io clicco
destro e faccio edit break point al
quale lui mi dice quando io con quale
condizione io devo fare funzionare il
break point e io allora io dico per
esempio voglio i o meglio la mia
variabili i che sia uguale a 2
ok adesso ha cambiato colore
adesso se io vado a ricaricare il mio la
mia pagina
come vedete javascript ha bloccato il
codice qui però due interazioni del mio
ciclo for sono già state eseguite la
zero e la1 e adesso io da qui possa
schiacciare play e finisce l'iterazione
ogni browser bene o male supporta
l'opzione di debugging come vi ho fatto
vedere con chrome in descrizione vi
metto un link che vi rimanda alla pagina
di come si può usare chrome per fare debugging
comunque safari alla sua console firefox
alla sua console non c'è problema quindi
potete fare il debugging nel vostro
browser preferito
qui ci sono tante altre cose che non vi
ho fatto vedere per questioni di
tempo via ho dato solo un'idea di quello
che si può fare
andatevela a vedere perché è una utilità
un'opzione molto utile che il nostro
browser ci dà a noi sviluppatori per
riuscire a risolvere questi questi bug e
dentro il nostro codice
con questo è tutto ci sentiamo la
prossima ciao