Metti in pausa il codice con punti di interruzione

Kayce Basques

Sofia Emelianova

Utilizza i punti di interruzione per mettere in pausa il codice JavaScript. Questa guida spiega ogni tipo di punto di interruzione disponibile in DevTools, nonché quando utilizzarlo e come impostare ogni tipo. Per un tutorial interattivo sul processo di debug, consulta la Guida introduttiva al debug di JavaScript in Chrome DevTools.

Panoramica su quando utilizzare ogni tipo di punto di interruzione

Il tipo di punto di interruzione più noto è la riga di codice. Tuttavia, i punti di interruzione della riga di codice possono essere inefficienti da impostare, soprattutto se non sai esattamente dove cercare o se stai lavorando con un codebase di grandi dimensioni. Puoi risparmiare tempo durante il debug sapendo come e quando utilizzare gli altri tipi di punti di interruzione.

Tipo di punto di interruzione	Da utilizzare per ...
Riga di codice	Metti in pausa in corrispondenza di una regione esatta del codice.
Riga di codice condizionale	Metti in pausa in una regione esatta del codice, ma solo quando un'altra condizione è vera.
Punto di log	Registra un messaggio nella console senza sospendere l'esecuzione.
DOM	Metti in pausa il codice che modifica o rimuove uno specifico nodo DOM o i relativi nodi figlio.
XHR	Metti in pausa quando un URL XHR contiene un pattern stringa.
Listener di eventi	Metti in pausa il codice che viene eseguito dopo che è stato attivato un evento, ad esempio click.
Eccezione	Mettiti in pausa sulla riga di codice che genera un'eccezione rilevata o non rilevata.
Funzione	Metti in pausa ogni volta che viene richiamata una funzione specifica.
Tipo attendibile	Metti in pausa le violazioni del tipo Trusted Type (Tipo attendibile).

Punti di interruzione riga di codice

Utilizza un punto di interruzione riga di codice quando conosci l'esatta regione di codice che devi esaminare. DevTools sempre si mette in pausa prima dell'esecuzione di questa riga di codice.

Per impostare un punto di interruzione riga di codice in DevTools:

1. Fai clic sulla scheda Origini.
2. Apri il file contenente la riga di codice in cui vuoi interrompere l'operazione.
3. Vai alla riga di codice.
4. A sinistra della riga di codice è presente la colonna del numero di riga. Fai clic su di essa. Sopra la colonna del numero di riga appare un'icona blu.

Questo esempio mostra un punto di interruzione della riga di codice impostato alla riga 29.

Punti di interruzione riga di codice nel codice

Chiama debugger dal tuo codice per mettere in pausa sulla linea in questione. Equivale a un punto di interruzione riga di codice, tranne per il fatto che il punto di interruzione è impostato nel codice, non nell'interfaccia utente di DevTools.

console.log('a');
console.log('b');
debugger;
console.log('c');

Punti di interruzione condizionale riga di codice

Utilizza un punto di interruzione condizionale della riga di codice quando vuoi interrompere l'esecuzione, ma solo quando una condizione è vera.

Questi punti di interruzione sono utili quando vuoi saltare interruzioni irrilevanti per il tuo caso, soprattutto in un loop.

Per impostare un punto di interruzione condizionale riga di codice:

1. Apri la scheda Origini.
2. Apri il file contenente la riga di codice in cui vuoi interrompere l'operazione.
3. Vai alla riga di codice.
4. A sinistra della riga di codice è presente la colonna del numero di riga. Fai clic con il tasto destro del mouse.
5. Seleziona Aggiungi punto di interruzione condizionale. Sotto la riga di codice viene visualizzata una finestra di dialogo.
6. Inserisci la condizione nella finestra di dialogo.
7. Premi Invio per attivare il punto di interruzione. Sopra la colonna del numero di riga viene visualizzata un'icona arancione con un punto interrogativo.

Questo esempio mostra un punto di interruzione condizionale della riga di codice che si è attivato solo quando x ha superato 10 in un loop con l'iterazione i=6.

Registra punti di interruzione riga di codice

Utilizza i punti di interruzione riga di codice dei log (punti di log) per registrare i messaggi nella console senza sospendere l'esecuzione e senza ingombrare il codice con chiamate console.log().

Per impostare un punto di log:

1. Apri la scheda Origini.
2. Apri il file contenente la riga di codice in cui vuoi interrompere l'operazione.
3. Vai alla riga di codice.
4. A sinistra della riga di codice è presente la colonna del numero di riga. Fai clic con il tasto destro del mouse.
5. Seleziona Aggiungi punto di log. Sotto la riga di codice viene visualizzata una finestra di dialogo.

6. Inserisci il messaggio di log nella finestra di dialogo. Puoi utilizzare la stessa sintassi di una chiamata console.log(message).

   Ad esempio, puoi registrare:

   "A string " + num, str.length > 1, str.toUpperCase(), obj
   

   In questo caso, il messaggio registrato è:

   // str = "test"
   // num = 3
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

7. Premi Invio per attivare il punto di interruzione. Viene visualizzata un'icona rosa con due puntini sopra la colonna dei numeri di riga.

Questo esempio mostra un punto di log alla riga 30 che registra una stringa e un valore di variabile nella console.

Modifica punti di interruzione riga di codice

Utilizza il riquadro Punti di interruzione per disattivare, modificare o rimuovere i punti di interruzione riga di codice.

Modifica gruppi di punti di interruzione

Il riquadro Punti di interruzione raggruppa i punti di interruzione per file e li ordina in base ai numeri di riga e colonna. Con i gruppi puoi eseguire le seguenti operazioni:

• Per comprimere o espandere un gruppo, fai clic sul suo nome.
• Per attivare o disattivare singolarmente un gruppo o un punto di interruzione, fai clic sulla accanto al gruppo o al punto di interruzione.
• Passa il mouse sopra un gruppo per rimuoverlo e fai clic su .

Questo video mostra come comprimere i gruppi e disattivare o attivare i punti di interruzione uno alla volta o per gruppi. Quando disattivi un punto di interruzione, il riquadro Origini rende trasparente il relativo indicatore accanto al numero di riga.

I gruppi dispongono di menu contestuali. Nel riquadro Punti di interruzione, fai clic con il tasto destro del mouse su un gruppo e scegli:

• Rimuovi tutti i punti di interruzione nel file (gruppo).
• Disattiva tutti i punti di interruzione nel file.
• Attiva tutti i punti di interruzione nel file.
• Rimuovi tutti i punti di interruzione (in tutti i file).
• Rimuovi gli altri punti di interruzione (in altri gruppi).

Modifica punti di interruzione

Per modificare un punto di interruzione:

• Fai clic su accanto a un punto di interruzione per attivarlo o disattivarlo. Quando disattivi un punto di interruzione, il riquadro Origini rende trasparente il relativo indicatore accanto al numero di riga.
• Passa il mouse sopra un punto di interruzione e fai clic su per modificarlo e per rimuoverlo.

• Quando modifichi un punto di interruzione, cambia il tipo dall'elenco a discesa nell'editor in linea.

  

• Fai clic con il pulsante destro del mouse su un punto di interruzione per visualizzare il relativo menu contestuale e scegliere una delle seguenti opzioni:

  

  • Mostra la posizione.
  • Modifica condizione o punto di log.
  • Attiva tutti i punti di interruzione.
  • Disattiva tutti i punti di interruzione.
  • Rimuovi punto di interruzione.
  • Rimuovi gli altri punti di interruzione (in tutti i file).
  • Rimuovi tutti i punti di interruzione (in tutti i file).

Guarda il video per vedere le varie modifiche dei punti di interruzione in azione: disattiva, rimuovi, modifica condizione, mostra la località dal menu e cambia tipo.

Punti di interruzione modifica DOM

Utilizza un punto di interruzione della modifica del DOM quando vuoi mettere in pausa il codice che modifica un nodo DOM o i relativi nodi figlio.

Per impostare un punto di interruzione della modifica del DOM:

1. Fai clic sulla scheda Elementi.
2. Vai all'elemento su cui vuoi impostare il punto di interruzione.
3. Fai clic con il tasto destro del mouse sull'elemento.
4. Passa il mouse sopra Interrompi su, quindi seleziona Modifiche sottoalbero, Modifiche degli attributi o Rimozione del nodo.

Questo esempio mostra il menu contestuale per la creazione di un punto di interruzione della modifica del DOM.

Puoi trovare un elenco di punti di interruzione delle modifiche del DOM in:

• Elementi > riquadro Punti di interruzione DOM.
• Origini > riquadro laterale Punti di interruzione DOM.

Lì potrai:

• Attivale o disattivale con .
• Fai clic con il tasto destro del mouse > Rimuovi o Mostra nel DOM.

Tipi di punti di interruzione delle modifiche del DOM

• Modifiche ai sottoalbero. Si attiva quando un elemento secondario del nodo attualmente selezionato viene rimosso o aggiunto o quando i contenuti di un nodo secondario vengono modificati. Non attivato in caso di modifiche agli attributi del nodo figlio o in caso di modifiche al nodo attualmente selezionato.
• Modifiche degli attributi: si attivano quando un attributo viene aggiunto o rimosso sul nodo attualmente selezionato o quando il valore di un attributo cambia.
• Rimozione del nodo: viene attivata quando il nodo attualmente selezionato viene rimosso.

Punti di interruzione XHR/recupero

Utilizza un punto di interruzione XHR/recupero quando vuoi interrompere un'interruzione quando l'URL della richiesta di un XHR contiene una stringa specificata. DevTools si mette in pausa nella riga di codice in cui l'XHR chiama send().

Ad esempio, quando scopri che la pagina richiede un URL errato e vuoi trovare rapidamente il codice sorgente AJAX o Fetch che causa la richiesta errata.

Per impostare un punto di interruzione XHR/recupero:

1. Fai clic sulla scheda Origini.
2. Espandi il riquadro Punti di interruzione XHR.
3. Fai clic su Aggiungi punto di interruzione.
4. Inserisci la stringa da interrompere. DevTools si mette in pausa quando questa stringa è presente in un punto qualsiasi dell'URL di richiesta di un XHR.
5. Premi Invio per confermare.

Questo esempio mostra come creare un punto di interruzione XHR/recupero nei punti di interruzione XHR/fetch per qualsiasi richiesta contenente org nell'URL.

Punti di interruzione listener di eventi

Utilizza i punti di interruzione del listener di eventi quando vuoi mettere in pausa il codice del listener di eventi eseguito dopo l'attivazione di un evento. Puoi selezionare eventi specifici, ad esempio click, o categorie di eventi, ad esempio tutti gli eventi del mouse.

1. Fai clic sulla scheda Origini.
2. Espandi il riquadro Punti di interruzione listener di eventi. DevTools mostra un elenco di categorie di eventi, ad esempio Animazione.
3. Seleziona una di queste categorie per mettere in pausa ogni volta che viene attivato un evento di quella categoria oppure espandi la categoria e controlla un evento specifico.

Questo esempio mostra come creare un punto di interruzione del listener di eventi per deviceorientation.

Inoltre, il Debugger si mette in pausa per gli eventi che si verificano nei web worker o nei worklet di qualsiasi tipo, inclusi i worklet dello spazio di archiviazione condiviso.

Questo esempio mostra l'elemento Debugger in pausa su un evento setTimer che si è verificato in un service worker.

Puoi trovare un elenco di listener di eventi anche nel riquadro Elementi > Listener di eventi.

Punti di interruzione eccezioni

Utilizza i punti di interruzione dell'eccezione quando vuoi fare una pausa sulla riga di codice che genera un'eccezione rilevata o non rilevata. Puoi mettere in pausa entrambe queste eccezioni in modo indipendente in qualsiasi sessione di debug diversa da Node.js.

Punto chiave: attualmente, in una sessione di debug Node.js, puoi mettere in pausa le eccezioni rilevate solo se metti in pausa anche quelle non rilevate. Per informazioni dettagliate, consulta il bug di Chromium n. 1382762.

Nel riquadro Punti di interruzione della scheda Origini, attiva una delle seguenti opzioni o entrambe, quindi esegui il codice:

• Seleziona Metti in pausa in caso di eccezioni non rilevate.

  

  In questo esempio, l'esecuzione viene messa in pausa in base a un'eccezione non rilevata.

• Seleziona Metti in pausa in caso di eccezioni rilevate.

  

  In questo esempio, l'esecuzione viene messa in pausa su un'eccezione rilevata.

Eccezioni nelle chiamate asincrone

Quando una o entrambe le caselle di controllo catturate e non rilevate sono attive, il Debugger tenta di mettere in pausa le eccezioni corrispondenti nelle chiamate sincrone e asincrone. Nel caso asincrono, il Debugger cerca i gestori del rifiuto nelle promesse per determinare quando interrompersi.

Rilevate eccezioni e codice ignorato

Quando l'opzione Ignora elenco è attivata, il Debugger si mette in pausa in caso di eccezioni rilevate in frame non ignorati o passando attraverso un frame di questo tipo nello stack di chiamate.

L'esempio successivo mostra il Debugger in pausa in merito a un'eccezione rilevata generata dal library.js ignorato che passa attraverso il campo mycode.js non ignorato.

Per scoprire di più sul comportamento di Debugger nei casi limite, testa una raccolta di scenari in questa pagina demo.

Punti di interruzione della funzione

Richiama debug(functionName), dove functionName è la funzione di cui vuoi eseguire il debug quando vuoi mettere in pausa ogni volta che viene richiamata una funzione specifica. Puoi inserire debug() nel codice (ad esempio un'istruzione console.log()) o chiamarlo dalla console DevTools. debug() equivale a impostare un punto di interruzione riga di codice sulla prima riga della funzione.

function sum(a, b) {
  let result = a + b; // DevTools pauses on this line.
  return result;
}
debug(sum); // Pass the function object, not a string.
sum();

Assicurati che la funzione di destinazione rientri nell'ambito

DevTools genera un errore ReferenceError se la funzione di cui vuoi eseguire il debug non rientra nell'ambito.

(function () {
  function hey() {
    console.log('hey');
  }
  function yo() {
    console.log('yo');
  }
  debug(yo); // This works.
  yo();
})();
debug(hey); // This doesn't work. hey() is out of scope.

Verificare che la funzione di destinazione rientri nell'ambito può essere complicato se chiami debug() dalla console DevTools. Ecco una strategia:

1. Imposta un punto di interruzione riga di codice da qualche parte in cui la funzione rientra nell'ambito.
2. Attiva il punto di interruzione.
3. Richiama debug() nella console DevTools mentre il codice è ancora in pausa nel punto di interruzione della riga di codice.

Punti di interruzione Tipo attendibile

L'API Trusted Type fornisce protezione contro attacchi di sicurezza noti come attacchi cross-site scripting (XSS).

Termine chiave: il cross-site scripting (XSS) basato su DOM si verifica quando i dati provenienti da una sorgente controllata dall'utente (come un nome utente o un URL di reindirizzamento ricavato dal frammento dell'URL) raggiungino in un sink, ovvero una funzione come eval() o un setter proprietà come .innerHTML, in grado di eseguire un codice JavaScript arbitrario.

Nel riquadro Punti di interruzione della scheda Origini, vai alla sezione Punti di interruzione violazione CSP e attiva una delle seguenti opzioni o entrambe, quindi esegui il codice:

• Seleziona Violazioni del sink.

  

  In questo esempio, l'esecuzione viene messa in pausa in caso di violazione del sink.

• Verifica le violazioni delle norme.

  

  In questo esempio, l'esecuzione viene messa in pausa a causa di una violazione delle norme. I criteri Trusted Type sono configurati utilizzando trustedTypes.createPolicy.

Puoi trovare ulteriori informazioni sull'uso dell'API:

• Per migliorare gli obiettivi di sicurezza, consulta Prevenire le vulnerabilità di cross-site scripting (XSS) basate su DOM con tipi attendibili.
• Per il debug, consulta la pagina Implementazione del debug di CSP e di tipi attendibili in Chrome DevTools.