Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 106)

Jecelyn Yeen

Raggruppa i file per Creato / Distribuito nel riquadro Origini

La sezione Raggruppa file per Creato / Distribuito è ora visibile nel menu con tre puntini. In precedenza, veniva visualizzata direttamente nel riquadro di navigazione.

Apri questa demo. Attiva l'impostazione Raggruppa i file per Creato / Distribuito per visualizzare prima il codice sorgente originale (Creato) e accedervi più rapidamente.

Raggruppa i file per Creato / Distribuito

Bug di Chromium: 1352488

Analisi dello stack migliorate

Analisi dello stack collegate per le operazioni asincrone

Quando alcune operazioni sono pianificate per essere eseguite in modo asincrono, le analisi dello stack in DevTools ora raccontano tutta la storia dell'operazione. In precedenza, racconta solo una parte della storia.

Ad esempio, apri questa demo e fai clic sul pulsante Incrementa. Espandi il messaggio di errore nella console. Nel nostro codice sorgente, l'operazione include un'operazione timeout asincrona.

// application.component.ts

async increment() {
    await Promise.resolve().then(() => timeout(100));
    …
}

In precedenza, l'analisi dello stack mostrava solo l'operazione di timeout. Non ha mostrato la "causa principale" dell'operazione.

Con le ultime modifiche, DevTools mostra ora che l'operazione ha avuto origine dall'evento onClick nel componente del pulsante, poi dalla funzione increment e poi dall'operazione di timeout.

Analisi dello stack collegate per le operazioni asincrone

DevTools ha introdotto in background una nuova funzionalità di "tagging asincrono dello stack". Puoi raccontare l'intera operazione collegando entrambe le parti del codice asincrono con il nuovo metodo console.createTask(). Per saperne di più, consulta Debug moderno in DevTools.

Sembra complicato? Niente affatto. La maggior parte delle volte, il framework in uso gestisce la pianificazione e l'esecuzione asincrona. In questo caso, l'utilizzo dell'API dipende dal framework e non dovrai preoccuparti di questo. (ad es. Angular ha implementato queste modifiche)

Bug di Chromium: 1334585

Ignorare automaticamente gli script di terze parti noti

Identifica i problemi nel codice più rapidamente durante il debug, in quanto DevTools ora aggiunge automaticamente script di terze parti noti all'elenco degli elementi da ignorare.

Apri questa demo e fai clic sul pulsante Incrementa. Espandi il messaggio di errore nella console. L'analisi dello stack mostra solo il tuo codice (ad es. app.component.ts button.component.ts). Fai clic su Mostra altri frame per visualizzare l'analisi completa dello stack.

In precedenza, l'analisi dello stack includeva script di terze parti come zone.js e core.mjs. Non si tratta del tuo codice sorgente, ma di un bundler (ad es. webpack) o di framework (ad es. Angular). L'identificazione della causa principale di un errore ha richiesto più tempo.

Ignorare automaticamente gli script di terze parti noti nell'analisi dello stack

DevTools ignora gli script di terze parti basati sulla nuova proprietà x_google_ignoreList nelle mappe di origine. I framework e i bundler devono fornire queste informazioni. Consulta Case study: migliorare il debug Angular con DevTools.

Facoltativamente, se preferisci visualizzare sempre le analisi complete dello stack, puoi disattivare l'impostazione tramite Impostazioni > Elenco ignorati > Aggiungi automaticamente script di terze parti noti all'elenco di elementi da ignorare.

Impostazione che consente di aggiungere automaticamente script di terze parti noti all'elenco degli elementi da ignorare

Bug di Chromium: 1323199

Stack di chiamate migliorato durante il debug

Con l'impostazione Aggiungi automaticamente script di terze parti noti all'elenco di elementi da ignorare, lo stack di chiamate ora mostra solo i frame pertinenti al tuo codice.

Apri questa demo e imposta un punto di interruzione nella funzione increment() in app.component.ts. Fai clic sul pulsante di incremento nella pagina per attivare il punto di interruzione. Lo stack di chiamate mostra solo i frame del tuo codice (ad es. app.component.ts e button.component.ts).

Per visualizzare tutti i frame, attiva Mostra frame inclusi nell'elenco di elementi da ignorare. In precedenza, DevTools mostrava tutti i frame per impostazione predefinita.

Stack di chiamate migliorato durante il debug

Bug di Chromium: 1352488

Le origini elencate di seguito vengono nascoste nel riquadro Origini

Attiva l'opzione Nascondi le origini incluse nell'elenco di elementi da ignorare per nascondere i file non pertinenti nel riquadro Navigazione. In questo modo, puoi concentrarti solo sul codice.

Apri questa demo. Nel riquadro Origini. node_modules e webpack sono gli script di terze parti. Fai clic sul menu con tre puntini e seleziona nascondi le origini incluse nell'elenco di elementi da ignorare per nasconderle dal riquadro.

Le origini elencate di seguito vengono nascoste nel riquadro Origini

Bug di Chromium: 1352488

I file elencati di seguito nel menu dei comandi vengono nascosti.

Con l'impostazione Nascondi le origini incluse nell'elenco di elementi da ignorare, puoi trovare più rapidamente il file con il menu dei comandi. In precedenza, la ricerca di file nel menu dei comandi restituisce file di terze parti che potrebbero non essere pertinenti.

Ad esempio, attiva l'impostazione Nascondi origini incluse nell'elenco di elementi da ignorare e fai clic sul menu con tre puntini. Seleziona Apri file. Digita "ton" per cercare i componenti del pulsante. In precedenza, i risultati includono i file di node_modules, uno dei file node_modules visualizzato anche come primo risultato.

I file elencati di seguito nel menu dei comandi vengono nascosti.

Bug di Chromium: 1336604

Nuovo monitoraggio Interazioni nel riquadro Rendimento

Utilizza la nuova traccia Interazioni nel riquadro Rendimento per visualizzare le interazioni e tenere traccia di potenziali problemi di reattività.

Ad esempio, avvia una registrazione del rendimento in questa pagina demo. Fai clic su un caffè e interrompi la registrazione. Nella traccia Interazioni vengono visualizzate due interazioni. Entrambe le interazioni hanno gli stessi ID, il che indica che le interazioni vengono attivate dalla stessa interazione dell'utente.

Monitoraggio delle interazioni nel riquadro Rendimento

Bug di Chromium: 1347390

Analisi dei tempi LCP nel riquadro Informazioni sul rendimento

Il riquadro Informazioni sul rendimento ora mostra l'analisi delle tempistiche della visualizzazione elemento più grande (LCP). Utilizza queste informazioni sui tempi per comprendere e identificare un'opportunità per migliorare il rendimento dell'LCP.

Analisi dei tempi LCP nel riquadro Informazioni sul rendimento

Bug di Chromium: 1351735

Genera automaticamente un nome predefinito per le registrazioni nel riquadro Registratore

Ora il riquadro Registratore genera automaticamente un nome per le nuove registrazioni.

Nome predefinito per le registrazioni nel riquadro Registratore

Bug di Chromium: 1351383

Varie in evidenza

In precedenza, le estensioni Registratore non venivano visualizzate nel riquadro Registratore di tanto in tanto. (1351416)
Il riquadro Stili ora mostra un selettore colori per la proprietà stop-color dell'elemento SVG <stop>. (1351096)
Identifica gli script che causano il thrashing del layout come potenziali cause principali delle variazioni del layout nel riquadro Informazioni sul rendimento. (1343019)
Visualizza il percorso critico per i caratteri web LCP nel riquadro Performance Insights. (1350390)

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 consentono di accedere alle ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema di DevTools usando Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
Invia un tweet all'indirizzo @ChromeDevTools.
Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.