Novità di DevTools, Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Esegui il debug delle richieste di rete, dei file di origine e delle tracce delle prestazioni con Gemini

Oltre allo stile CSS, ora puoi usare Gemini per parlare di richieste di rete, file di origine e tracce delle prestazioni.

Analogamente al menu contestuale nel riquadro Elementi, per aprire il riquadro Assistenza AI e avviare la chat con Gemini, fai clic con il tasto destro del mouse e seleziona Chiedi all'AI oppure fai clic sul pulsante Chiedi all'AI accanto a:

  • Una richiesta di rete nel riquadro Rete.
  • Un file nella scheda Origini > Pagina.
  • Un'attività nella traccia Rendimento > Principale.

Pulsanti e opzione di menu Chiedi all'AI in Rete, Origini e Rendimento.

Gemini terrà conto del contesto della richiesta, del file o dell'attività selezionati.

Il team di DevTools non vede l'ora di ricevere il tuo feedback all'indirizzo crbug.com/364805393.

Cronologia della chat AI

Ora puoi ripristinare e visualizzare le chat passate con Gemini nel riquadro Assistenza AI facendo clic sul pulsante Nuova chat nell'angolo in alto a sinistra del riquadro o utilizzando i pulsanti e le opzioni di menu Chiedi all'AI del riquadro Rete, delle schede Fonti > Pagina e Rendimento > Traccia principale.

Per visualizzare una delle tue chat precedenti, seleziona il prompt corrispondente dal menu a discesa sotto il pulsante Cronologia. Il riquadro Assistenza AI memorizzerà la cronologia della chat mentre DevTools è aperto.

La cronologia della chat AI in un menu a discesa sotto il pulsante "Cronologia".

Gestisci lo spazio di archiviazione delle estensioni in Applicazione > Spazio di archiviazione

Analogamente allo spazio di archiviazione locale e di sessione, ora puoi visualizzare e modificare le voci di archiviazione delle estensioni nella sezione Applicazione > Spazio di archiviazione.

Prima e dopo l'aggiunta della sezione "Archiviazione estensioni" al pannello Applicazione.

Problema di Chromium: crbug.com/40963428.

Miglioramenti del rendimento

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Fasi di interazione nelle metriche live

Ora puoi espandere le interazioni nelle metriche live sul rendimento per visualizzare una suddivisione delle fasi e dei relativi tempi.

Prima e dopo l'aggiunta di una suddivisione delle fasi e dei relativi tempi alle interazioni.

Come comunicato in L'estensione Web Vitals, ora in DevTools, il rilascio di queste funzionalità segna la fine del supporto per l'estensione Web Vitals.

Problema di Chromium: crbug.com/369097528.

Informazioni sul blocco del rendering nella scheda Riepilogo

Quando selezioni una richiesta di rete contrassegnata da un triangolo rosso nella traccia Rendimento > Rete, la scheda Riepilogo, oltre al suggerimento (refactoring), ora indica anche che la richiesta blocca il rendering.

Prima e dopo l'aggiunta delle informazioni sul rendering bloccante alla scheda Riepilogo.

Supporto per gli eventi scheduler.postTask e le relative frecce di iniziativa

La traccia Rendimento > Principale ora mostra gli eventi scheduler.postTask() e le seguenti frecce di inizializzazione tra:

  • Schedule postTask -> Fire postTask
  • Schedule postTask -> Abort postTask

Prima e dopo l'aggiunta del supporto per gli eventi scheduler.postTask e le relative frecce di inizializzazione.

Problema di Chromium: crbug.com/40775984.

Miglioramenti al riquadro Animazioni e alla scheda Stili di Elementi

Questa versione introduce alcuni miglioramenti al pannello Animazioni e alla scheda Elementi > Stili.

Nella scheda Elementi > Stili ora sono presenti le icone Animazione Vai al riquadro Animazioni accanto al valore delle proprietà animation, in modo da poter ispezionare facilmente le animazioni.

Prima e dopo l'aggiunta di un link dalla scheda Stili al riquadro Animazioni.

Aggiornamenti in tempo reale nella scheda Calcolati

La scheda Elementi > Calcolato ora aggiorna i valori calcolati in tempo reale quando, ad esempio, le animazioni li aggiornano.

Calcola l'emulazione della pressione in Sensori

Il riquadro Sensori ora ti consente di emulare la pressione della CPU Nominal, Fair, Serious e Critical.

Prima e dopo l'aggiunta dell'opzione di emulazione della pressione della CPU al riquadro Sensori.

Problema di Chromium: crbug.com/362277525.

Oggetti JS con lo stesso nome raggruppati per origine nel riquadro Memoria

Il riquadro Memoria ora distingue gli oggetti JS con lo stesso nome provenienti da origini diverse e li raggruppa di conseguenza.

Gli oggetti JS di raggruppamento prima e dopo con lo stesso nome anche per origine.

Problema di Chromium: crbug.com/357902505.

Un nuovo look per le impostazioni

Per allineare meglio il design dell'interfaccia utente, le impostazioni di DevTools ora assomigliano di più a quelle di Chrome. In particolare, le sezioni sono ora separate visivamente in "schede".

Le sezioni prima e dopo sono separate in "schede".

Il riquadro Informazioni sulle prestazioni è deprecato e rimosso da DevTools

Tutte le funzionalità importanti e utili del riquadro Informazioni sulle prestazioni sono ora disponibili nel riquadro Prestazioni, in particolare nelle metriche in tempo reale, nella scheda della barra laterale Approfondimenti e nella traccia Spostamenti del layout. Pertanto, questa versione ritira e rimuove il riquadro Informazioni sulle prestazioni da DevTools.

Il team di DevTools è grato per il feedback che hai fornito sul ritiro di questo pannello e sull'esperienza complessiva di debug delle prestazioni. Come sempre, ci piace conoscere la tua opinione e il tuo punto di vista. Continua così!

Punti salienti vari

Di seguito sono riportate alcune correzioni e alcuni miglioramenti degni di nota in questa release:

  • Rendimento:
    • È stato rimosso un limite non necessario di 3 caratteri per le query di ricerca.
    • È stato aggiunto il pulsante Home, che ti riporta alla schermata delle metriche in tempo reale.
    • Sono state corrette le scorciatoie di zoom della traccia Maiusc+S/W precedentemente non funzionanti.
  • Elementi > Stili:
    • Aggiunta di anchor-center al completamento automatico 341991541.
    • È stato corretto un bug relativo all'editor Flexbox non disponibile per i valori di due parole 341964645.
  • Rete: gli errori di prefetch ora sono avvisi gialli anziché errori rossi per indicare che la visualizzazione dei contenuti non è interessata 372055494.

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 funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.