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
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
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
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
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
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
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:
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.
- Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
- Invia un tweet all'account @ChromeDevTools.
- Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.