Novità di DevTools, Chrome 132

Sofia Emelianova
Sofia Emelianova
GitHub

Esegui il debug di richieste di rete, file di origine e tracce relative alle prestazioni con Gemini

Oltre agli stili CSS, ora puoi chattare con Gemini su richieste di rete, file di origine e tracce delle prestazioni.

Come per il 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'IA oppure fai clic sul pulsante Chiedi all'IA accanto a quanto segue:

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

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

Gemini prenderà in considerazione il contesto della richiesta, del file o dell'attività selezionata.

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

Cronologia chat con l'IA

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 Chiedi all'AI e le opzioni di menu del riquadro Rete, Origini > scheda Pagina e Rendimento > canale Principale.

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

La cronologia chat dell'IA in un menu a discesa sotto il pulsante "Cronologia".

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

Come per lo spazio di archiviazione locale e della sessione, ora puoi visualizzare e modificare le voci dello spazio di archiviazione delle estensioni nella sezione Applicazione > Spazio di archiviazione.

La situazione prima e dopo l'aggiunta della sezione "Spazio di archiviazione delle estensioni" al riquadro Applicazione.

Problema di Chromium: crbug.com/40963428.

Miglioramenti del rendimento

Questa versione introduce una serie di miglioramenti al riquadro Rendimento.

Fasi di interazione nelle metriche in tempo reale

Ora puoi espandere le interazioni nelle metriche in tempo reale sul rendimento per visualizzare un'analisi delle fasi e dei relativi tempi.

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

Come comunicato nell'articolo L'estensione Web Vitals, ora in DevTools, il rilascio di queste funzionalità segna la fine del supporto dell'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 nel canale Rendimento > Rete, la scheda Riepilogo, oltre alla descrizione comando (ristrutturata), ora indica anche che la richiesta blocca il rendering.

Le immagini prima e dopo l'aggiunta delle informazioni relative al blocco del rendering alla scheda Riepilogo.

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

Il canale Rendimento > Principale ora mostra gli eventi scheduler.postTask() e le seguenti frecce di iniziatore 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 avvio.

Problema di Chromium: crbug.com/40775984.

Miglioramenti al riquadro Animazioni e alla scheda Elementi > Stili

Questa versione apporta un paio di miglioramenti al riquadro Animazioni e alla scheda Elementi > Stili.

La scheda Elementi > Stili ora inserisce un pulsante Animazione Vai al riquadro Animazioni accanto al valore delle proprietà animation, in modo da poter modificare facilmente l'animazione.

L'immagine prima e dopo l'aggiunta di un link dalla scheda Stili al riquadro Animazioni.

Aggiornamenti in tempo reale nella scheda Calcolata

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

Eseguire l'emulazione della pressione in Sensori

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

L'immagine 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 che provengono da origini diverse e li raggruppa di conseguenza.

Il prima e il dopo il raggruppamento degli oggetti JS 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 sono più simili a quelle di Chrome. In particolare, le sezioni ora sono visivamente separate in "schede".

Le sezioni prima e dopo la separazione in "schede".

Il riquadro Informazioni sulle prestazioni è deprecato e rimosso da DevTools

Tutte le funzionalità importanti e utili del riquadro Approfondimenti sul rendimento ora hanno trovato una nuova casa nel riquadro Rendimento, in particolare nelle metriche in tempo reale, nella scheda della barra laterale Approfondimenti e nel canale 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 ci hai fornito in merito al ritiro di questo riquadro e all'esperienza complessiva di debug delle prestazioni. Come sempre, ci piace conoscere la tua opinione e le tue prospettive. Continua così!

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti significativi di 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 per lo zoom traccia Maiusc+S/W che in precedenza non funzionavano.
  • Elementi > Stili:
    • È stato aggiunto anchor-center al completamento automatico 341991541.
    • È stato corretto un bug relativo all'editor di Flexbox non disponibile per i valori di due parole 341964645.
  • Rete: le operazioni di pre-caricamento non riuscite ora sono avvisi gialli o errori rossi per indicare che la visualizzazione dei contenuti non è interessata 372055494.

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

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

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.