Novità di DevTools, Chrome 137

Sofia Emelianova
Sofia Emelianova
GitHub

Edizione Google I/O 2025

Chrome DevTools avrà una presenza significativa al Google I/O di quest'anno. Saranno presenti sessioni dal vivo e registrate.

Per scoprire nuove funzionalità interessanti, segui i seguenti link:

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

Dai un'occhiata al nostro ultimo video per una rapida panoramica delle nostre ultime novità:

Modificare e salvare le modifiche CSS nello spazio di lavoro con Gemini

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

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

Con una cartella dello spazio di lavoro collegata, 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.

Collega una cartella dello spazio di lavoro e salva le modifiche nei file di origine

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

Scopri come funziona con JavaScript:

Problema di Chromium: 404170628.

Chiedi a Gemini informazioni sugli approfondimenti sul rendimento

Ora, con un solo clic, puoi avviare una chat con Gemini per esaminare e intervenire 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

La situazione prima e dopo l'aggiunta del pulsante "Chiedi all'IA" a un'intuizione nel riquadro Rendimento.

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

Annotare i risultati relativi al rendimento 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 e poi fai clic su Genera etichetta accanto al campo di immissione. Gemini può suggerire un'etichetta in base alla traccia dello stack e al contesto.

Aggiungere screenshot alle chat con Gemini

Nel riquadro Assistenza IA, 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.

L'immagine prima e dopo l'aggiunta del pulsante "Fai screenshot" al riquadro "Assistenza AI".

Nuovi approfondimenti nel riquadro Rendimento

Questa versione introduce due nuovi approfondimenti nel riquadro Rendimento: JavaScript duplicato e JavaScript precedente.

JavaScript duplicato

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

L'insight "JavaScript duplicato" nel riquadro Prestazioni.

Puoi anche fare clic su Visualizza mappa ad albero nell'approfondimento per esplorare le dipendenze di JavaScript.

JavaScript precedente

La nuova sezione Rendimento > Approfondimenti > JavaScript precedente evidenzierà nella sezione Rete le richieste di JavaScript precedente, se presenti nella tua pagina, ad esempio i polyfill e le trasformazioni che consentono ai browser precedenti di utilizzare le 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

La sezione Applicazione > Carichi speculativi ora mostra i tag anziché gli URL per gli insiemi di regole, se presenti.

La regola di sostituzione prima e dopo imposta l'URL con un tag.

Problema di Chromium: 393408589.

Lighthouse 12.6.0

Il riquadro Lighthouse ora esegue Lighthouse 12.6.0.

In questa versione, in particolare, Lighthouse passerà ai controlli degli approfondimenti sulle prestazioni. Nella categoria Rendimento del report Lighthouse, ora puoi provare gli approfondimenti.

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

Consulta anche l'elenco completo delle modifiche.

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

Problema di Chromium: 40543651.

Altri punti salienti

Di seguito sono riportate alcune correzioni e alcuni miglioramenti significativi di 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).
  • L'opzione Rendimento > Approfondimenti > Utilizza durate della cache efficienti ora ignora gli asset con TTL uguale o superiore a 30 giorni.

Accessibilità

Questa versione introduce i seguenti miglioramenti dell'accessibilità:

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

  • Ora gli screen reader annunciano, tra le altre cose:

    • "Copiato negli appunti" quando copi da blocchi di codice.
    • "Applicazione allo spazio di lavoro" quando applichi modifiche allo spazio di lavoro nella chat dell'assistenza AI.
    • "Generare etichetta" quando chiedi all'IA di generarla in Rendimento > Annotazioni.
    • Tieni presente che nella chat dell'assistenza AI sono disponibili prompt suggeriti.
    • Leggi i risparmi stimati per gli approfondimenti pertinenti in Rendimento > Approfondimenti.

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 i tuoi 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.