In che modo la nuova barra laterale Punti di interruzione consente di eseguire il debug più velocemente

Kim-Anh Tran
Kim-Anh Tran
Vaatika Dabra Groth
Vaatika Dabra Groth

Il riquadro della barra laterale dei breakpoint vecchio e nuovo affiancati.

Se utilizzi Chrome 111 o versioni successive, potresti aver già notato che abbiamo modificato il design della barra laterale dei punti di interruzione. Con Chrome 113, la nuova barra laterale sostituisce completamente il vecchio design. Il nostro obiettivo con il nuovo design era migliorare il flusso di lavoro dei breakpoint:

Fornisce una panoramica migliore di tutti i punti di interruzione impostati. Rendere i flussi di lavoro comuni degli utenti con i punti di interruzione più facili da accedere e più intuitivi. Rendere visibili le funzionalità dei breakpoint esistenti.

Questo post presuppone che tu abbia già dimestichezza con il debug mediante i breakpoint. Se non hai mai utilizzato i punti di interruzione, consulta questa panoramica sui punti di interruzione per scoprire di più su come utilizzarli per eseguire il debug del codice.

Ora vediamo cosa offre il nuovo design e come puoi utilizzare la nuova barra laterale. Tieni presente che il nuovo design si concentra sul rendere le funzionalità esistenti più intuitive e facili da usare, anziché aggiungere nuove funzionalità.

Metti in pausa in caso di eccezioni per capire perché il codice genera un errore

Metti in pausa in caso di eccezioni rilevate e non rilevate.

Il codice genera un'eccezione? Non preoccuparti. DevTools di Chrome ti consente di mettere in pausa le eccezioni per interrompere l'esecuzione nel punto in cui viene lanciata l'eccezione. In questo modo puoi esaminare e comprendere meglio le circostanze in cui il codice genera un errore. Puoi scegliere se mettere in pausa in caso di eccezioni rilevate, eccezioni non rilevate o entrambe, selezionando le caselle di controllo corrispondenti nella barra laterale.

Gestisci i punti di interruzione: espandi i gruppi di punti di interruzione pertinenti e comprimi gli altri per concentrarti su ciò che è importante

Comprimi ed espandi i gruppi di breakpoint.

I punti di interruzione possono essere distribuiti su più file. La barra laterale dei punti di interruzione raggruppa i punti di interruzione in base al file a cui appartengono. Concentrati solo su quelli importanti per la sessione di debug corrente espandendo i gruppi di breakpoint pertinenti e comprimendo quelli rimanenti.

Gestisci i punti di interruzione: un solo clic per passare al codice, rimuovere o attivare/disattivare i punti di interruzione

La barra laterale dei punti di interruzione ti consente di svolgere attività comuni con un solo clic. Ecco una panoramica di come puoi ...

Vai alla posizione dell'interruzione nell'editor di codice. Rimuovi un punto di interruzione o tutti i punti di interruzione all'interno di un file. Attiva o disattiva un punto di interruzione o tutti i punti di interruzione all'interno di un file.

E tutto questo con un solo clic. Ovviamente, queste opzioni sono disponibili anche nel menu contestuale:

Vai alla posizione del punto di interruzione facendo clic sullo snippet di codice del punto di interruzione

Vai alla posizione del codice sorgente nell'editor di codice.

Vuoi controllare dove hai impostato il punto di interruzione nel codice e analizzare il codice circostante? Basta fare clic sullo snippet di codice di un punto di interruzione nella barra laterale per aprire la posizione del codice nell'editor di codice.

Rimuovi un singolo punto di interruzione o tutti i punti di interruzione all'interno di un file facendo clic sul pulsante Rimuovi

Rimuovi un singolo punto di interruzione o tutti i punti di interruzione all'interno di un file.

Passa il mouse sopra un punto di interruzione o un gruppo di punti di interruzione per visualizzare un pulsante di rimozione che rimuove un singolo punto di interruzione o tutti i punti di interruzione di un file al clic.

Disattivare un singolo punto di interruzione o tutti i punti di interruzione all'interno di un file

Attiva o disattiva uno o tutti i punti di interruzione all'interno di un file.

Seleziona o deseleziona la casella di controllo accanto a un punto di interruzione per attivarlo o disattivarlo.

Per attivare o disattivare tutti i punti di interruzione in un file, passa il mouse sopra il gruppo di punti di interruzione e seleziona o deseleziona la casella di controllo accanto al nome del file.

Utilizza queste funzionalità dei punti di interruzione meno conosciute: punti di interruzione condizionali e logpoint

Modificare le condizioni del punto di interruzione o modificare il log del punto di log modificando un punto di interruzione

Modifica le condizioni dei punti di interruzione o i log dei punti di log.

Per modificare una condizione o un log del punto di interruzione, passa il mouse sopra un punto di interruzione e fai clic sul pulsante Modifica visualizzato. Viene visualizzata una finestra di dialogo per modificare il tipo e i dettagli dell'interruzione.

In alternativa, seleziona la riga del punto di interruzione nell'editor di codice e digita Control+Alt+B su Linux e Comando+Alt+B su Mac per aprire la finestra di dialogo di modifica del punto di interruzione.

Puoi anche verificare rapidamente la condizione o il logpoint passando il mouse sopra il punto di interruzione nella barra laterale:

Visualizza il log della condizione o del punto di log.

Conclusione

Lo scopo della riprogettazione della barra laterale dei breakpoint era semplificare il debug con i breakpoint. Soprattutto, abbiamo cercato di rendere tutto più strutturato, di più facile accesso e comprensione. Ci auguriamo che questi miglioramenti ti siano utili nella prossima sessione di debug.

Se hai suggerimenti per ulteriori miglioramenti, comunicacelo inviando un bug.

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.