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ù facile e veloce.

Ora puoi facilmente ordinare i file, ottimizzare la tua ricerca, nascondere script di terze parti, accedere a rapporti approfonditi sulle prestazioni e molto altro discusso in questo articolo. Questi devtools 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 la visualizzazione e il debug il loro codice.

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

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

instagram viewer

1. File raggruppati per Creati/Distribuiti

Ora puoi passare direttamente ai componenti dell'applicazione raggruppando i file in creato/distribuito sul fonte pannello. Vai a Origine > menu a 3 punti > Raggruppa per Creato/Distribuito. Ora, quando apri i file, puoi vedere solo i tuoi file distribuiti sul pannello.

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

2. Ricerca file semplificata

Puoi restringere la ricerca nel pannello delle fonti 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 Cheat sheet di ricerca su Google. Per configurare questa impostazione vai al Menu a 3 punti > Nascondi fonti ignorate.

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

Per attivare questa funzione, vai a Impostazioni > Ignora elenco > Aggiungi automaticamente script di terze parti noti all'elenco degli elementi da ignorare. 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 relative 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 file console.createTask() metodo in Chrome 106. Questo metodo consente ai framework di eseguire analisi dello stack sulla console. Il debug di JavaScript utilizzando devtools è altrettanto semplice debugging CSS utilizzando Chrome.

5. Tieni traccia delle interazioni nel pannello delle prestazioni

Tieni traccia delle nuove interazioni nel file Prestazione per identificare potenziali problemi di reattività della 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 relativi ID. Il tracciamento aiuta a identificare la fonte e ad intercettarla di conseguenza.

6. Approfondimenti sui tempi LCP nel pannello delle prestazioni

IL La più grande vernice contenta (LCP) i dettagli sui tempi sono ora disponibili su pannello di informazioni sulle prestazioni. LCP è una metrica vitale delle prestazioni web che riporta il tempo di rendering delle immagini o dei blocchi di testo necessari per essere caricati sulla pagina web. Un punteggio di 2,5 secondi o inferiore è un buon punteggio per le prestazioni.

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

Aggiornamenti aggiuntivi in ​​Chrome 106

Altri miglioramenti a Chrome 106 includono:

  • Puoi esportare le tue registrazioni di script senza problemi dal file Registratore pannello. Il pulsante di esportazione presentava un problema nelle versioni precedenti.
  • Ora hai un selettore di colori nel file Stili elementi SVG del riquadro.
  • Puoi identificare gli script che distorcono il tuo layout nel file Informazioni sulle prestazioni pannello.
  • È possibile visualizzare i percorsi per i caratteri Web LCP nel file Informazioni sulle prestazioni pannello.

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 velocizzano il processo di debug. I nuovi aggiornamenti facilitano la visualizzazione delle operazioni attraverso una console semplificata e dinamica che ti consente di nascondere file, disabilitare script, registrare e avere una visione approfondita della tua applicazione quando debugging.

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