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 la riprogettazione era migliorare il flusso di lavoro dei breakpoint:
Fornendo una migliore panoramica di tutti i punti di interruzione impostati. Rendere i workflow utente comuni con i punti di interruzione più facili da accedere e più intuitivi. Rendere visibili le funzionalità di punto di interruzione esistenti.
Questo post presuppone che tu abbia già familiarità con il debug utilizzando i punti di interruzione. Se non hai mai utilizzato i punti di interruzione, consulta questa panoramica sui punti di interruzione e scopri di più su come utilizzarli per eseguire il debug del codice.
Ora diamo un'occhiata a cosa offre il nuovo design e a come puoi utilizzare la nuova barra laterale. Tieni presente che la riprogettazione si concentra sul rendere le funzionalità esistenti più intuitive da usare e più facili da accedere, anziché aggiungere nuove funzionalità.
Metti in pausa in caso di eccezioni per capire perché il codice genera un errore
Il tuo codice genera un'eccezione? Non preoccuparti. Chrome DevTools ti consente di mettere in pausa le eccezioni per interrompere l'esecuzione nel punto in cui viene generata 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 punti di interruzione pertinenti e comprimendo quelli rimanenti.
Gestisci i punti di interruzione: un clic per passare al codice, rimuovere o attivare/disattivare i punti di interruzione
La barra laterale dei punti di interruzione ti consente di eseguire attività comuni con un solo clic. Ecco una panoramica di come puoi…
Vai alla posizione del punto di 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. Naturalmente, 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 in quale punto del codice hai impostato il punto di interruzione e analizzare il codice circostante? Basta fare clic sullo snippet di codice di un punto di interruzione all'interno della 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 di rimozione
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 in un file con un clic.
Disattivare 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 visualizzata accanto al nome del file.
Utilizza queste funzionalità meno note dei punti di interruzione: punti di interruzione condizionali e logpoint
Modificare le condizioni del punto di interruzione o cambiare il log del punto di log modificando un punto di interruzione
Modifica una condizione di punto di interruzione o un log passando il mouse sopra un punto di interruzione e facendo clic sul pulsante Modifica visualizzato. Si apre una finestra di dialogo per modificare il tipo di punto di interruzione e i relativi dettagli.
In alternativa, seleziona la riga del punto di interruzione nell'editor di codice e digita Control+Alt+b su Linux e Command+Alt+b su Mac per aprire la finestra di dialogo di modifica del punto di interruzione.
Puoi anche controllare rapidamente la condizione o il logpoint passando il mouse sopra il punto di interruzione nella barra laterale:
Conclusione
Il nostro obiettivo alla base della riprogettazione della barra laterale dei punti di interruzione era semplificare il debug con i punti di interruzione. Ancora più importante, abbiamo cercato di rendere le cose più strutturate e più facili da accedere e comprendere. Ci auguriamo che questi miglioramenti ti siano utili nella prossima sessione di debug.
Se hai suggerimenti per ulteriori miglioramenti, comunicaceli segnalando un bug.
Scaricare i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti danno accesso alle funzionalità più recenti di DevTools, ti consentono di testare le API della piattaforma web all'avanguardia e ti aiutano a trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.
Contatta il team di Chrome DevTools
Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.
- Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
- Segnala un problema di DevTools utilizzando Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
- Invia un tweet a @ChromeDevTools.
- Lascia un commento sui video di YouTube Novità di DevTools o Suggerimenti di DevTools.