Novità di DevTools, Chrome 137

Sofia Emelianova
Sofia Emelianova
GitHub

Edizione Google I/O 2025

Chrome DevTools avrà una forte presenza al Google I/O di quest'anno. Ci sarà un mix di sessioni dal vivo e registrate.

Per scoprire le nuove funzionalità, segui i seguenti canali:

Inoltre, non dimenticare di seguire la sessione di Rachel Andrew Novità sul web, il 20 maggio 2025 alle 16:30 PT.

Guarda il nostro ultimo video per una rapida panoramica dei nostri ultimi momenti salienti:

Modificare e salvare le modifiche CSS nel tuo workspace con Gemini

Con pochi clic, ora puoi chiedere a Gemini di modificare e correggere il CSS per te e, con una cartella dello spazio di lavoro connessa, salvare le modifiche nei file di origine sul computer.

Gli spazi di lavoro automatici sono una funzionalità sperimentale. Puoi collegare la tua cartella di origine esistente o provare una demo.

Con una cartella dello spazio di lavoro connessa, nel riquadro Elementi, fai clic su Chiedi all'AI, chiedi a Gemini di modificare il CSS, fai clic su Continua per testare le modifiche in tempo reale, poi espandi Modifiche non salvate, fai clic su Applica allo spazio di lavoro, esamina la differenza e fai clic su Salva tutto.

Connettere una cartella dello spazio di lavoro e salvare le modifiche nei file di origine

Ora puoi connettere automaticamente (o manualmente) una cartella dello spazio di lavoro per consentire a DevTools di salvare le modifiche a JavaScript, HTML e CSS nei file di origine memorizzati sul computer.

Scopri come funziona con JavaScript:

Problema di Chromium: 404170628.

Chiedere a Gemini informazioni sugli approfondimenti sul rendimento

Con un clic di un pulsante, ora puoi avviare una chat con Gemini per esaminare e agire in base ai seguenti approfondimenti sul rendimento:

  • LCP per fase
  • Rilevamento della richiesta LCP
  • Richieste di blocco del rendering
  • Responsabili delle variazioni del layout
  • Latenza di richiesta di download del documento

Prima e dopo l'aggiunta del pulsante "Chiedi all'AI" a un approfondimento nel riquadro Rendimento.

Non esitare a lasciare un feedback sulla funzionalità all'indirizzo crbug.com/371170842.

Annotare i risultati delle prestazioni con Gemini

Ora puoi chiedere a Gemini di generare annotazioni sugli eventi nella traccia delle prestazioni.

Fai doppio clic su un evento nella traccia Principale, quindi fai clic su Genera etichetta accanto al campo di input. Gemini può suggerire un'etichetta in base allo stack trace e al contesto.

Aggiungere screenshot alle chat con Gemini

Nel riquadro Assistenza AI, ora puoi fare clic sul pulsante Fai screenshot per acquisire uno screenshot della pagina e inviarlo alla chat con Gemini.

Puoi utilizzare gli screenshot per fornire un contesto visivo aggiuntivo ai tuoi prompt, ad esempio per verificare se tutti i pulsanti visibili hanno la stessa spaziatura.

Prima e dopo l'aggiunta del pulsante "Acquisisci screenshot" al pannello "Assistenza AI".

Nuovi approfondimenti nel riquadro Prestazioni

Questa versione introduce due nuove informazioni nel riquadro Rendimento: JavaScript duplicato e JavaScript legacy.

JavaScript duplicato

La nuova sezione Rendimento > Approfondimenti > JavaScript duplicato evidenzia nella traccia Rete le richieste di moduli JavaScript duplicati di grandi dimensioni nei bundle, se presenti nella pagina.

L'insight "JavaScript duplicato" nel riquadro Prestazioni.

Puoi anche fare clic su Visualizza mappa ad albero nella scheda informativa per esplorare le dipendenze JavaScript.

JavaScript precedente

La nuova sezione Rendimento > Approfondimenti > JavaScript legacy evidenzierà nella traccia Rete le richieste di JavaScript legacy, se presenti nella pagina, ad esempio polyfill e trasformazioni che consentono ai browser precedenti di utilizzare nuove funzionalità JavaScript. Tanti non sono però necessari per i browser moderni.

L'insight "JavaScript precedente" nel riquadro Prestazioni.

Le speculazioni ora supportano i tag delle regole

Ora Applicazione > Caricamenti speculativi mostra i tag anziché gli URL per i set di regole, se sono presenti.

Prima e dopo la sostituzione dell'URL del set di regole con un tag.

Problema di Chromium: 393408589.

Lighthouse 12.6.0

Il riquadro Lighthouse ora esegue Lighthouse 12.6.0.

La novità più importante di questa versione è che Lighthouse passa ai controlli degli approfondimenti sul rendimento. Nella categoria Rendimento del report Lighthouse, ora puoi Provare gli approfondimenti.

Prima e dopo l'aggiunta dell'opzione per passare agli approfondimenti in un report Lighthouse.

Consulta anche l'elenco completo delle modifiche.

Per scoprire le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema di Chromium: 40543651.

Punti salienti vari

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

  • Rete: è stata aggiunta l'analisi per i formati noti dei tempi del server.
  • Ora puoi deselezionare le righe nelle tabelle con Cmd/Ctrl + clic (problema di Chromium: 409474445).
  • Rendimento > Approfondimenti > Utilizza durate della cache efficienti ora ignora gli asset con TTL pari o superiore a 30 giorni.

Accessibilità

Questa versione introduce i seguenti miglioramenti dell'accessibilità:

  • Rendimento: le frecce dell'iniziatore nella traccia ora sono più visibili.
  • Elementi: ora puoi attivare/disattivare la visualizzazione ad albero dell'accessibilità a pagina intera con la scorciatoia A (problema di Chromium: 40888478).

  • Gli screen reader ora annunciano, tra le altre cose:

    • "Copiato negli appunti" quando copi dai blocchi di codice.
    • "Applicazione al workspace" quando applichi le modifiche al tuo workspace nella chat dell'assistenza AI.
    • "Generazione etichetta" quando chiedi all'AI di generarla in Rendimento > Annotazioni.
    • Tieni presente che nella chat Assistenza AI sono disponibili prompt suggeriti.
    • Leggi i risparmi stimati per gli approfondimenti pertinenti in Rendimento > Approfondimenti.

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.