Metti in pausa il codice con punti di interruzione

Utilizza i punti di interruzione per mettere in pausa il codice JavaScript. Questa guida illustra ogni tipo di punto di interruzione disponibili in DevTools, nonché quando utilizzarli e come impostare ciascun tipo. Per un tutorial interattivo sulla procedura di debug, consulta Iniziare a eseguire il debug di JavaScript in Chrome DevTools.

Panoramica su quando utilizzare ogni tipo di punto di interruzione

Il tipo più noto di punto di interruzione è la riga di codice. ma i punti di interruzione riga del codice poco efficace da impostare, soprattutto se non sai esattamente dove cercare o se stai lavorando con un di un grande codebase. Puoi risparmiare tempo durante il debug sapendo come e quando utilizzare l'altra e i tipi di punti di interruzione.

Tipo di punto di interruzione	Da utilizzare quando vuoi ...
Linea di codice	Metti in pausa su una regione esatta del codice.
Riga di codice condizionale	Metti in pausa su una regione esatta del codice, ma solo quando qualche altra condizione è vera.
Punto di log	Registrare un messaggio nella console senza mettere in pausa 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 uno schema di stringa.
Listener di eventi	Metti in pausa il codice eseguito dopo l'attivazione di un evento, ad esempio click.
Eccezione	Metti in pausa la riga di codice che genera un'eccezione rilevata o non rilevata.
Funzione	Metti in pausa ogni volta che viene chiamata una funzione specifica.
Tipo attendibile	Metti in pausa in caso di violazioni delle norme Trusted Type.

Punti di interruzione riga del codice

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

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

1. Fai clic sul riquadro Origini.
2. Apri il file contenente la riga di codice su cui vuoi eseguire l'interruzione.
3. Vai alla riga di codice.
4. A sinistra della riga di codice c'è la colonna dei numeri della riga. Fai clic su di essa. Viene visualizzata un'icona blu in alto nella colonna dei numeri di riga.

Questo esempio mostra un punto di interruzione line-of-code impostato nella riga 29.

Punti di interruzione riga di codice nel codice

Chiama il numero debugger dal tuo codice per mettere in pausa su quella riga. Equivale a una riga di codice punto di interruzione, ad eccezione del fatto che il punto di interruzione è impostato nel codice, non nell'UI di DevTools.

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

Punti di interruzione riga di codice condizionali

Utilizza un punto di interruzione condizionale della riga di codice quando vuoi arrestare l'esecuzione, ma solo quando alcune condizioni sono vere.

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

Per impostare un punto di interruzione condizionale della riga di codice:

1. Apri il riquadro Origini.
2. Apri il file contenente la riga di codice su cui vuoi eseguire l'interruzione.
3. Vai alla riga di codice.
4. A sinistra della riga di codice è presente la colonna dei numeri della 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. Nella parte superiore della colonna dei numeri della 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 del codice

Utilizza i punti di interruzione riga del codice (logpoint) per registrare i messaggi nella console senza mettere in pausa l'esecuzione e senza ingombrare il codice con chiamate console.log().

Per impostare un punto di log:

1. Apri il riquadro Origini.
2. Apri il file contenente la riga di codice su cui vuoi eseguire l'interruzione.
3. Vai alla riga di codice.
4. A sinistra della riga di codice è presente la colonna dei numeri della 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 a 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 = 42
   // obj = {attr: "x"}
   A string 42 true TEST {attr: 'x'}
   

7. Premi Invio per attivare il punto di interruzione. Nella parte superiore della colonna dei numeri della riga viene visualizzata un'icona rosa con due puntini.

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

Modifica punti di interruzione riga del codice

Utilizza la sezione Punti di interruzione per disattivare, modificare o rimuovere i punti di interruzione riga del codice.

Modifica gruppi di punti di interruzione

La sezione 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 effettuare le seguenti operazioni:

• Per comprimere o espandere un gruppo, fai clic sul suo nome.
• Per abilitare o disabilitare un gruppo o un punto di interruzione singolarmente, fai clic su accanto al gruppo o al punto di interruzione.
• Per rimuovere un gruppo, passaci il mouse sopra e fai clic su .

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

I gruppi dispongono di menu contestuali. Nella sezione 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.
• Abilita tutti i punti di interruzione nel file.
• Rimuovi tutti i punti di interruzione (in tutti i file).
• Rimuovi 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 l'indicatore accanto al numero di linea.
• Passa il mouse sopra un punto di interruzione e fai clic su per modificarlo e su per rimuoverlo.

• Quando modifichi un punto di interruzione, modifica 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 menu contestuale e scegli una delle opzioni:

  

  • Mostra posizione.
  • Modifica la condizione o il punto di log.
  • Abilita 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: disattivazione, rimozione, modifica della condizione, rivela la posizione dal menu e il tipo di modifica.

Salta i punti di interruzione con "Non mettere mai in pausa qui"

Utilizza un punto di interruzione riga di codice Non mettere mai in pausa qui per saltare le pause che potrebbero verificarsi per altri motivi. Questo può essere utile se hai attivato i punti di interruzione di eccezione, ma il debugger continua a arrestarsi in caso di eccezione particolarmente rumorosa che non ti interessa.

Per disattivare l'audio di una pausa:

1. Nel riquadro Origini, apri il file di origine e trova la riga su cui non vuoi interrompere.
2. Fai clic con il pulsante destro del mouse sul numero di riga nella colonna del numero di riga a sinistra, accanto all'istruzione che causa l'interruzione.
3. Dal menu a discesa, seleziona Non mettere mai in pausa qui. Accanto alla riga viene visualizzato un punto di interruzione arancione (condizionale).

Puoi anche disattivare il punto di interruzione mentre l'esecuzione è in pausa. Guarda il prossimo video per scoprire il flusso di lavoro.

Con l'opzione Non mettere mai in pausa qui, puoi disattivare le istruzioni del debugger e ogni altro tipo di punti di interruzione, ad eccezione dei punti di interruzione riga di codice e dei punti di interruzione del listener di eventi.

L'opzione Non mettere mai in pausa qui potrebbe non funzionare su una riga con più istruzioni se l'affermazione che non deve essere messa in pausa è diversa da quella che causa la pausa. Nel codice mappato nel codice sorgente, non tutte le posizioni dei punti di interruzione corrispondono all'istruzione originale che causa l'interruzione.

Punti di interruzione modifica DOM

Utilizza un punto di interruzione modifica DOM quando vuoi sospendere il codice che modifica un nodo DOM o la relativa bambini.

Per impostare un punto di interruzione per la 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, quindi seleziona Modifiche alla struttura secondaria, Modifiche degli attributi o Rimozione dei nodi.

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

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

• Elementi > Riquadro Punti di interruzione DOM.
• Fonti > Riquadro laterale Punti di interruzione DOM.

Lì puoi:

• Attivale o disattivale con .
• Clic con il tasto destro del mouse > Rimuovile o Rivela nel DOM.

Tipi di punti di interruzione delle modifiche del DOM

• Modifiche dei sottoalbero. Si attiva quando un nodo secondario del nodo attualmente selezionato viene rimosso o o vengono modificati i contenuti di un asset secondario. Non attivato in caso di modifiche degli attributi del nodo figlio oppure su eventuali modifiche al nodo attualmente selezionato.
• Modifiche degli attributi: si attiva quando un attributo viene aggiunto o rimosso nella nodo attualmente selezionato o quando il valore di un attributo cambia.
• Rimozione del nodo: si attiva quando il nodo attualmente selezionato viene rimosso.

Punti di interruzione XHR/recupero

Usa un punto di interruzione XHR/recupero quando vuoi interrompere quando l'URL della richiesta di un XHR contiene un stringa. DevTools mette in pausa sulla riga di codice dove l'XHR chiama send().

Ciò può risultare utile, ad esempio, quando 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 sul riquadro Origini.
2. Espandi il riquadro Punti di interruzione XHR.
3. Fai clic su Aggiungi punto di interruzione.
4. Inserisci la stringa da interrompere. DevTools viene messo in pausa quando è presente questa stringa in qualsiasi punto 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 che contiene org nell'URL.

Punti di interruzione del 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 un viene attivato. Puoi selezionare eventi specifici, ad esempio click, oppure categorie di eventi, come tutti gli eventi del mouse.

1. Fai clic sul riquadro Origini.
2. Espandi il riquadro Punti di interruzione listener di eventi. DevTools mostra un elenco di categorie di eventi, come Animazione.
3. Seleziona una di queste categorie per mettere in pausa ogni evento di quella categoria che viene attivato o espandere la categoria e controllare un evento specifico.

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

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

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

Puoi anche trovare un elenco di listener di eventi in Elementi > Riquadro Listener di eventi.

Punti di interruzione delle eccezioni

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

Nella sezione Punti di interruzione del riquadro Origini, abilita 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 è in pausa in un'eccezione non rilevata.

• Seleziona Metti in pausa in caso di eccezioni rilevate.

  

  In questo esempio, l'esecuzione è in pausa in base a un'eccezione rilevata.

Eccezioni nelle chiamate asincrone

Se le caselle di controllo "Rilevato" e "Non rilevato" sono attivate, il Debugger tenta di mettere in pausa le eccezioni corrispondenti nelle chiamate sincrone e asincrone. Nel caso asincrono, il Debugger cerca i gestori di rifiuto tra le promesse per determinare quando interrompersi.

Eccezioni rilevate e codice ignorato

Con l'opzione Ignora elenco attivata, il Debugger mette in pausa le eccezioni rilevate in frame non ignorati o che passano attraverso un frame di questo tipo nello stack di chiamate.

L'esempio successivo mostra che il Debugger è stato messo in pausa in base a un'eccezione rilevata generata dal library.js ignorato che passa attraverso 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 funzione

Richiama debug(functionName), dove functionName è la funzione di cui vuoi eseguire il debug, quando vuoi pausa ogni volta che viene chiamata una funzione specifica. Puoi inserire debug() nel codice (ad esempio, console.log()) o chiamarla dalla console DevTools. debug() equivale all'impostazione 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 target rientri nell'ambito

DevTools genera un 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.

Assicurarsi che la funzione di destinazione sia nell'ambito può essere difficile se chiami debug() da DevTools Google Cloud. Ecco una strategia:

1. Imposta un punto di interruzione riga di codice in un punto in cui la funzione rientra nell'ambito.
2. Attiva il punto di interruzione.
3. Chiama debug() nella console DevTools mentre il codice è ancora in pausa sulla tua riga di codice punto di interruzione.

Punti di interruzione di tipo Attendibile

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

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

• Seleziona Violazioni dei sink.

  

  In questo esempio, l'esecuzione è in pausa per una violazione del sink.

• Seleziona Violazioni delle norme.

  

  In questo esempio, l'esecuzione è in pausa per una violazione delle norme. I criteri di tipo Attendibile vengono configurati utilizzando trustedTypes.createPolicy.

Puoi trovare ulteriori informazioni sull'utilizzo dell'API:

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