\u00c8 ora possibile accedere direttamente ai componenti dell’applicazione raggruppando i file in creato\/distribuito<\/strong> nel pannello di origine .<\/strong> Vai a Sorgente> Menu a 3 punti> Raggruppa per creato\/distribuito<\/strong>. Ora, quando apri i file, puoi vedere solo i file distribuiti sul pannello.<\/p>\n Nelle versioni precedenti di Chrome, tutti i file del codice sorgente erano visibili nel pannello di navigazione<\/strong>, rendendo difficile trovare un singolo file.<\/p>\n 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.<\/p>\n Questo aggiornamento \u00e8 la versione devtools dell’ottimizzazione della ricerca sui browser Web con i cheat sheet di ricerca di Google.<\/a> Per configurare questa impostazione, vai al menu a 3 punti > Nascondi sorgenti dell’elenco da ignorare<\/strong>.<\/p>\n 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.<\/p>\n Per attivare questa funzione, vai su Impostazioni > Elenco ignorati > Aggiungi automaticamente script di terze parti noti<\/strong> all’elenco ignora. Quando riapri i file, la console mostrer\u00e0 solo i file rilevanti associati alla tua applicazione. Ora puoi vedere il tuo codice senza distrazioni.<\/p>\n Impiegherai meno tempo per identificare un errore sulla console, grazie a una nuova funzionalit\u00e0 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.<\/p>\n Google ha configurato un metodo console.createTask()<\/strong> in Chrome 106. Questo metodo consente ai framework di eseguire tracce dello stack sulla console. Il debug di JavaScript utilizzando devtools \u00e8 facile come il debug di CSS utilizzando Chrome.<\/a><\/p>\n Tieni traccia delle nuove interazioni nel pannello Prestazioni<\/strong> per identificare potenziali problemi di reattivit\u00e0 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.<\/p>\n![\"Google](\"https:\/\/howto.mediadoma.com\/wp-content\/uploads\/2022\/10\/post-167698-633f729228408.jpg\")
<\/a><\/p>\n2 Ricerca file semplificata<\/h2>\n
<\/a><\/p>\n3 Nascondi script di terze parti<\/h2>\n
<\/a><\/p>\n4 Tracce dettagliate dello stack<\/h2>\n
<\/a><\/p>\n5 Tieni traccia delle interazioni nel pannello delle prestazioni<\/h2>\n