JavaScript
Debug

I punti di interruzione

I punti di interruzione mettono in pausa il programma una volta che l'esecuzione raggiunge un certo punto. È quindi possibile scorrere il programma riga per riga, osservando la sua esecuzione e ispezionando il contenuto delle variabili.

Esistono tre modi per creare punti di interruzione.

1. Dal codice, usando il debugger; dichiarazione.
2. Dal browser, utilizzando gli Strumenti per sviluppatori.
3. Da un ambiente di sviluppo integrato (IDE).

Dichiarazione di debugger

Puoi piazzare un debugger; dichiarazione ovunque nel tuo codice JavaScript. Una volta che l'interprete JS raggiunge quella linea, interromperà l'esecuzione dello script, permettendoti di ispezionare le variabili e di esaminare il tuo codice.

Strumenti di sviluppo

La seconda opzione consiste nell'aggiungere un punto di interruzione direttamente nel codice dagli Strumenti per sviluppatori del browser.

Apertura degli strumenti per gli sviluppatori

Chrome o Firefox

1. Premi F12 per aprire Strumenti per sviluppatori
2. Passa alla scheda Fonti (Chrome) o Debugger (Firefox)
3. Premi Ctrl + P e digita il nome del tuo file JavaScript
4. Premi Invio per aprirlo.

Internet Explorer o Edge

1. Premi F12 per aprire Strumenti per sviluppatori
2. Passa alla scheda Debugger.
3. Utilizzare l'icona della cartella vicino all'angolo in alto a sinistra della finestra per aprire un riquadro di selezione file; puoi trovare il tuo file JavaScript lì.

Safari

1. Premi Comando + Opzione + C per aprire Strumenti per sviluppatori
2. Passa alla scheda Risorse
3. Apri la cartella "Script" nel pannello di sinistra
4. Seleziona il tuo file JavaScript.

Aggiunta di un punto di interruzione dagli Strumenti per sviluppatori

Dopo aver aperto il file JavaScript in Strumenti per sviluppatori, puoi fare clic su un numero di riga per inserire un punto di interruzione. La prossima volta che il programma verrà eseguito, si fermerà qui.

Nota sulle fonti minime: se la tua fonte è minimizzata, puoi Pretty Print (convertire in formato leggibile). In Chrome, ciò avviene facendo clic sul pulsante {} nell'angolo in basso a destra del visualizzatore del codice sorgente.

IDE

Codice Visual Studio (VSC)

VSC ha il supporto integrato per il debug di JavaScript.

1. Fai clic sul pulsante Debug a sinistra o Ctrl + Maiusc + D
2. Se non è già stato fatto, creare un file di configurazione di avvio ( launch.json ) premendo l'icona a forma di ingranaggio.
3. Esegui il codice da VSC premendo il pulsante di riproduzione verde o premi F5 .

Aggiunta di un punto di interruzione in VSC

Fare clic accanto al numero di riga nel file di origine JavaScript per aggiungere un punto di interruzione (verrà contrassegnato in rosso). Per eliminare il punto di interruzione, fai nuovamente clic sul cerchio rosso.

Suggerimento: puoi anche utilizzare i punti di interruzione condizionali negli strumenti di sviluppo del browser. Questi aiutano a saltare le interruzioni inutili in esecuzione. Scenario di esempio: si desidera esaminare una variabile in un ciclo esattamente alla ^5a iterazione.

Passando attraverso il codice

Dopo aver messo in pausa l'esecuzione su un punto di interruzione, è possibile seguire l'esecuzione riga per riga per osservare cosa succede. Apri gli Strumenti per sviluppatori del tuo browser e cerca le icone di controllo dell'esecuzione. (Questo esempio utilizza le icone in Google Chrome, ma saranno simili in altri browser.)

Riprendi: riattiva l'esecuzione. Shorcut: F8 (Chrome, Firefox)

Passaggio: esegui la prossima riga di codice. Se quella linea contiene una chiamata di funzione, esegui l'intera funzione e passa alla riga successiva, invece di saltare ovunque sia definita la funzione. Collegamento: F10 (Chrome, Firefox, IE / Edge), F6 (Safari)

Entra: Esegui la prossima riga di codice. Se quella linea contiene una chiamata di funzione, saltare nella funzione e fermarsi lì. Collegamento: F11 (Chrome, Firefox, IE / Edge), F7 (Safari)

Esci: Esegui il resto della funzione attuale, torna indietro al punto da cui è stata chiamata la funzione e metti in pausa la successiva istruzione. Scorciatoia: Maiusc + F11 (Chrome, Firefox, IE / Edge), F8 (Safari)

Utilizzali in combinazione con lo Stack di chiamate , che ti dirà in quale funzione ti trovi attualmente, quale funzione ha chiamato tale funzione e così via.

Consulta la guida di Google su "Come passare attraverso il codice" per maggiori dettagli e consigli.

Collegamenti alla documentazione della chiave di scelta rapida del browser:

• Cromo
• Firefox
• IE
• Bordo
• Safari

Interruzione automatica dell'esecuzione

In Google Chrome, puoi mettere in pausa l'esecuzione senza dover posizionare i punti di interruzione.

Pausa su Eccezione: mentre questo pulsante è attivato, se il programma raggiunge un'eccezione non gestita, il programma si interromperà come se avesse raggiunto un punto di interruzione. Il pulsante può essere trovato vicino a Controlli di esecuzione ed è utile per individuare gli errori.

Puoi anche sospendere l'esecuzione quando un tag HTML (nodo DOM) viene modificato, o quando i suoi attributi vengono modificati. Per farlo, fai clic con il pulsante destro del mouse sul nodo DOM nella scheda Elementi e seleziona "Interrompi su ...".

Variabili dell'interprete interattive

Si noti che questi funzionano solo negli strumenti di sviluppo di determinati browser.

$_ ti fornisce il valore di qualsiasi espressione valutata per ultima.

"foo"             // "foo"
$_                // "foo"

$0 riferisce all'elemento DOM attualmente selezionato nell'Inspector. Quindi se <div id="foo"> è evidenziato:

$0                      // <div id="foo">
$0.getAttribute('id')   // "foo"

$1 riferisce all'elemento precedentemente selezionato, $2 a quello selezionato prima, e così via per $3 e $4 .

Per ottenere una collezione di elementi che corrispondono a un selettore CSS, usa $$(selector) . Questa è essenzialmente una scorciatoia per document.querySelectorAll .

var images = $$('img');  // Returns an array or a nodelist of all matching elements

¹ _{alias su document.getElementById o document.querySelector}

Ispettore degli elementi

Cliccando sul Seleziona un elemento nella pagina per ispezionarlo nell'angolo in alto a sinistra della scheda Elementi nella scheda Chrome o Inspector in Firefox, disponibile da Strumenti per sviluppatori, quindi facendo clic su un elemento della pagina viene evidenziato l'elemento e lo si assegna a $0 variabile .

L'ispettore Elements può essere utilizzato in vari modi, ad esempio:

1. Puoi controllare se il tuo JS sta manipolando DOM nel modo in cui te lo aspetti,
2. Puoi facilmente eseguire il debug del tuo CSS, quando vedi quali regole influenzano l'elemento
   (Scheda Stili in Chrome)
3. Puoi giocare con CSS e HTML senza ricaricare la pagina.

Inoltre, Chrome ricorda le ultime 5 selezioni nella scheda Elementi. $0 è la selezione corrente, mentre $1 è la selezione precedente. Puoi salire fino a $4 . In questo modo puoi facilmente eseguire il debug di più nodi senza dover continuamente selezionare la selezione.

Puoi leggere ulteriori informazioni su Google Developers .

Usando setter e getter per trovare cosa ha cambiato una proprietà

Diciamo che hai un oggetto come questo:

var myObject = {
    name: 'Peter'
}

Più tardi nel tuo codice, provi ad accedere a myObject.name e ottieni George invece di Peter . Inizi a chiedersi chi l'ha cambiato e dove esattamente è stato cambiato. C'è un modo per posizionare un debugger (o qualcos'altro) su ogni set (ogni volta che qualcuno fa myObject.name = 'something' ):

var myObject = {
    _name: 'Peter',
    set name(name){debugger;this._name=name},
    get name(){return this._name}
}

Nota che abbiamo rinominato name in _name e definiremo un setter e un getter per name .

set name è il setter. Questo è un buon punto in cui è possibile inserire debugger , console.trace() o qualsiasi altra cosa necessaria per il debug. Il setter imposterà il valore per nome in _name . Il getter (la parte del get name ) leggerà il valore da lì. Ora abbiamo un oggetto completamente funzionale con funzionalità di debug.

La maggior parte delle volte, però, l'oggetto che viene modificato non è sotto il nostro controllo. Fortunatamente, possiamo definire setter e getter su oggetti esistenti per eseguirne il debug.

// First, save the name to _name, because we are going to use name for setter/getter
otherObject._name = otherObject.name;

// Create setter and getter
Object.defineProperty(otherObject, "name", {
    set: function(name) {debugger;this._name = name},
    get: function() {return this._name}
});

Scopri setter e getter a MDN per ulteriori informazioni.

Supporto browser per setter / getter:

Interrompi quando viene chiamata una funzione

Per le funzioni denominate (non anonime), è possibile interrompere quando la funzione viene eseguita.

debug(functionName);

Alla successiva esecuzione della functionName functionName, il debugger si fermerà sulla prima riga.

Usando la console

In molti ambienti, è possibile accedere a un oggetto console globale che contiene alcuni metodi di base per comunicare con dispositivi di output standard. Più comunemente, questa sarà la console JavaScript del browser (per ulteriori informazioni vedere Chrome , Firefox , Safari e Edge ).

// At its simplest, you can 'log' a string
console.log("Hello, World!");

// You can also log any number of comma-separated values
console.log("Hello", "World!");

// You can also use string substitution
console.log("%s %s", "Hello", "World!");

// You can also log any variable that exist in the same scope
var arr = [1, 2, 3];
console.log(arr.length, this);

È possibile utilizzare diversi metodi di console per evidenziare l'output in diversi modi. Altri metodi sono anche utili per il debug più avanzato.

Per ulteriori documentazione, informazioni sulla compatibilità e istruzioni su come aprire la console del browser, consultare l'argomento Console .

Nota: se è necessario supportare IE9, rimuovere console.log o racchiudere le sue chiamate come segue, perché la console non è definita fino a quando non vengono aperti gli Strumenti per sviluppatori:

if (console) { //IE9 workaround
    console.log("test");
}