Se utilizzi Chrome 111 o versioni successive, potresti aver già notato che abbiamo cambiato 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 punti di interruzione:
Fornisce una panoramica migliore di tutti i punti di interruzione impostati. Rendere i flussi di lavoro comuni degli utenti con punti di interruzione più semplici da accedere e più intuitivi. Rendo visibili le funzionalità straordinarie esistenti dei punti di interruzione.
Questo post presuppone che tu abbia già familiarità con il debug utilizzando i punti di interruzione. Se non hai mai usato i punti di interruzione, vai a questa panoramica sui punti di interruzione e scopri di più su come utilizzarli per eseguire il debug del codice.
Ora diamo un'occhiata a ciò che offre il nuovo design e a come potete utilizzare la nuova barra laterale. Tieni presente che il nuovo design si concentra sul rendere le funzionalità esistenti più intuitive da usare e facili da accedere, anziché sull'aggiunta di nuove funzionalità.
Fai una pausa in caso di eccezioni per scoprire perché il codice restituisce un errore
Il codice genera un'eccezione? Niente paura! Chrome DevTools consente di mettere in pausa in caso di eccezioni per interrompere l'esecuzione nel momento in cui viene generata l'eccezione. Questo può aiutarti a indagare e a comprendere meglio le circostanze in cui il codice genera un errore. Puoi scegliere se mettere in pausa le eccezioni rilevate, quelle 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 è pertinente
I punti di interruzione possono essere suddivisi tra 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 comprimi quelli rimanenti.
Gestisci i punti di interruzione: con un solo clic puoi passare al codice, rimuovere o attivare/disattivare i punti di interruzione
La barra laterale dei punti di interruzione ti consente di svolgere le attività più comuni con un solo clic. Di seguito viene riportata una panoramica su come ...
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 verificare in che punto del codice hai impostato il punto di interruzione e analizzare il codice circostante? Fai clic sullo snippet di codice di un punto di interruzione all'interno della barra laterale e la posizione del codice si aprirà 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 uno o tutti i punti di interruzione in un file al 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 caratteristiche dei punti di interruzione meno note: punti di interruzione condizionali e punti di log
Modifica le condizioni dei punti di interruzione o il log dei punti di log modificando un punto di interruzione
Modifica una condizione o un log di un punto di interruzione passando il mouse sopra un punto di interruzione e facendo clic sul pulsante Modifica visualizzato. Viene visualizzata una finestra di dialogo per modificare il tipo di punto di interruzione e i dettagli del punto di interruzione.
In alternativa, seleziona la riga del punto di interruzione nell'editor di codice e digita Ctrl+Alt+b su Linux e Comando+Alt+b su Mac per aprire la finestra di dialogo di modifica dei punti di interruzione.
Puoi anche controllare rapidamente la condizione o il log dei punti di log passando il mouse sopra il punto di interruzione nella barra laterale:
Conclusione
Il nostro obiettivo dietro la riprogettazione della barra laterale dei punti di interruzione era semplificare il debug con i punti di interruzione. Ma soprattutto il nostro obiettivo era rendere i contenuti più strutturati e più facili da consultare e comprendere. Ci auguriamo che questi miglioramenti ti siano utili nella prossima sessione di debug.
Se hai suggerimenti per ulteriori miglioramenti, faccelo sapere segnalando un bug.
Scarica i canali in anteprima
Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.
Contattare il team di Chrome DevTools
Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.
- Inviaci un suggerimento o un feedback tramite crbug.com.
- Segnala un problema DevTools utilizzando Altre opzioni
> Guida > Segnala i problemi di DevTools in DevTools. - Tweet all'indirizzo @ChromeDevTools.
- Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.