Google semplifica il debug con le nuove funzionalità di Devtools Chrome 106

Il debug può essere noioso e ancora più frustrante quando non è possibile individuare facilmente il bug. Gli strumenti per sviluppatori di Chrome 106 (devtools) sono impostati per semplificare il processo di debug, rendendolo più semplice e veloce.

Ora puoi facilmente ordinare i file, ottimizzare la tua ricerca, nascondere script di terze parti, accedere a rapporti approfonditi sul rendimento e molto altro ancora discusso in questo articolo. Questi strumenti di sviluppo sono essenziali, soprattutto per gli sviluppatori che lavorano con framework JavaScript come Angular, React e Vue.js, che ora dispongono di una console interattiva e semplificata per visualizzare ed eseguire il debug del proprio codice.

Diamo un’occhiata più da vicino ad alcune di queste nuove funzionalità:

Per sfruttare appieno i nuovi aggiornamenti su Chrome 106, scarica le versioni Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Avrai accesso agli ultimi strumenti per sviluppatori che consentono di testare le API della piattaforma web e di identificare rapidamente problemi o bug sul tuo sito per garantire ai tuoi utenti la migliore esperienza cliente.

È ora possibile accedere direttamente ai componenti dell’applicazione raggruppando i file in creato/distribuito nel pannello di origine . Vai a Sorgente> Menu a 3 punti> Raggruppa per creato/distribuito. Ora, quando apri i file, puoi vedere solo i file distribuiti sul pannello.

Nelle versioni precedenti di Chrome, tutti i file del codice sorgente erano visibili nel pannello di navigazione, rendendo difficile trovare un singolo file.

2 Ricerca file semplificata

Puoi limitare la ricerca nel pannello delle sorgenti solo ai file pertinenti. Nelle versioni precedenti di Chrome, i file generati dal framework e da altre terze parti venivano visualizzati nei risultati della ricerca, rendendo difficile l’identificazione dell’elemento di ricerca.

Questo aggiornamento è la versione devtools dell’ottimizzazione della ricerca sui browser Web con i cheat sheet di ricerca di Google. Per configurare questa impostazione, vai al menu a 3 punti > Nascondi sorgenti dell’elenco da ignorare.

3 Nascondi script di terze parti

Script di terze parti che riempiono la tua console? Chrome 106 ha aggiunto un’estensione dell’elenco da ignorare nella mappa di origine per consentirti di nascondere gli script generati automaticamente da framework e altre terze parti.

Per attivare questa funzione, vai su Impostazioni > Elenco ignorati > Aggiungi automaticamente script di terze parti noti all’elenco ignora. Quando riapri i file, la console mostrerà solo i file rilevanti associati alla tua applicazione. Ora puoi vedere il tuo codice senza distrazioni.

4 Tracce dettagliate dello stack

Impiegherai meno tempo per identificare un errore sulla console, grazie a una nuova funzionalità su Chrome 106. Gli strumenti per sviluppatori di Chrome ti offrono una visione dettagliata delle operazioni asincrone e delle loro cause principali. Nelle versioni precedenti erano visibili solo gli eventi che hanno portato all’operazione. Gli ultimi devTools mostrano l’intera catena di operazioni e le loro cause principali.

Google ha configurato un metodo console.createTask() in Chrome 106. Questo metodo consente ai framework di eseguire tracce dello stack sulla console. Il debug di JavaScript utilizzando devtools è facile come il debug di CSS utilizzando Chrome.

5 Tieni traccia delle interazioni nel pannello delle prestazioni

Tieni traccia delle nuove interazioni nel pannello Prestazioni per identificare potenziali problemi di reattività alla tua applicazione. In Chrome 106, tutte le interazioni vengono visualizzate nella traccia Interazioni dopo un’operazione. La traccia mostra l’origine delle interazioni e i loro ID. Il monitoraggio aiuta a identificare la fonte e ad intercettarla di conseguenza.

6 Approfondimenti sui tempi LCP nel pannello delle prestazioni

I dettagli sui tempi di Contentful Paint (LCP) più grandi sono ora disponibili nel pannello delle informazioni dettagliate sulle prestazioni. LCP è una metrica delle prestazioni Web di vitale importanza che riporta il tempo di rendering delle immagini o dei blocchi di testo necessari per il caricamento sulla pagina Web. Un punteggio di prestazione di 2,5 secondi o inferiore è un buon punteggio.

Per visualizzare gli approfondimenti, vai a pannello delle prestazioni>menu a 3 punti-più pedaggi>informazioni sulle prestazioni. Quando riproduci una registrazione, il pannello Dettagli mostrerà i tempi di caricamento.

Aggiornamenti aggiuntivi in ​​Chrome 106

Altri miglioramenti a Chrome 106 includono:

• Puoi esportare le registrazioni degli script senza problemi dal pannello Registratore . Il pulsante di esportazione ha avuto un problema nelle versioni precedenti.
• Ora hai un selettore colore negli elementi SVG del pannello Stili .
• Puoi identificare gli script che distorcono il tuo layout nel pannello Performance Insights .
• È possibile visualizzare i percorsi per i font Web LCP nel pannello Performance Insights .

Queste funzionalità possono migliorare il modo in cui utilizzi gli strumenti di sviluppo del browser.

Cosa ottieni da Chrome 106

Gli ultimi miglioramenti a devtools in Chrome 106 rendono il processo di debug più veloce. I nuovi aggiornamenti semplificano la visualizzazione delle operazioni attraverso una console semplificata e dinamica che consente di nascondere file, disabilitare gli script, registrare e avere una visione approfondita della propria applicazione durante il debug.

Le aggiunte di Chrome 106 ti permetteranno di gestire la tua applicazione e ottimizzarne le prestazioni. Vai avanti e goditi questi vantaggi aggiornando all’ultima versione di Chrome 106.