Novità di DevTools, Chrome 144

Matthias Rohmer

In Chrome 144 il team ha implementato una funzionalità molto attesa nel server MCP di Chrome DevTools, il nuovo riquadro Condizioni richiesta e miglioramenti per il debug dei caratteri e dei fogli di stile adottati.

Si conclude così il notevole elenco di funzionalità che abbiamo rilasciato nel 2025. Vuoi vedere se ne hai perso qualcuno? Poi dai un'occhiata ai momenti salienti o sfoglia le edizioni precedenti di Novità di DevTools.

Aggiornamenti del server MCP di DevTools

Abbiamo implementato varie correzioni per il server MCP di DevTools e rilasciato la versione 0.12.1. Questa versione introduce una nuova funzionalità chiave, la connessione automatica, che ti consente di riutilizzare una sessione del browser esistente. Con la connessione automatica, puoi iniziare il debug in Chrome e poi indirizzare DevTools MCP alla stessa istanza di Chrome per riprendere da dove avevi interrotto.

Scopri di più sulla connessione automatica per DevTools MCP in questo post del blog. Consulta il changelog pubblico su GitHub per l'elenco completo delle modifiche e delle correzioni di bug.

Limitazione della larghezza di banda della rete individuale

Il riquadro Blocco richieste di rete è stato rinominato Condizioni delle richieste. Oltre alle richieste di blocco, questo pannello ora ti consente anche di limitare le singole richieste.

Apri il riquadro da ⋮ > Altri strumenti > Condizioni di richiesta. Attiva/disattiva la casella di controllo Attiva blocco e limitazione per attivare il blocco delle richieste. Fai clic sul pulsante + per aggiungere un nuovo pattern di testo. Fai clic sull'icona per eliminare tutte le regole.

Scopri come limitare le singole richieste di rete nella documentazione aggiornata.

Modificare le regole @font-face e @font-feature-values

@font-face e @font-feature-values ora vengono visualizzati nel riquadro Stili e possono essere modificati da lì.

Fogli di stile adottati nel riquadro Elementi

Il riquadro Elementi ora mostra i fogli di stile adottati nelle radici shadow e nelle radici del documento. In questo modo, chi lavora con fogli di stile costruiti può trovare più facilmente i fogli di stile che influiscono sui propri elementi e eseguire il debug degli stili, soprattutto quando non vengono applicati in modo imprevisto.

Novità di DevTools 2025

Innovazioni dell'AI

A partire da Approfondimenti sulla console, le innovazioni dell'AI sono diventate parte integrante di Chrome DevTools, con il riquadro Assistenza AI che funge da hub principale per il debug assistito dall'AI sensibile al contesto. Con i suggerimenti per il codice nei riquadri Console e Sources e le annotazioni automatiche di Gemini nelle tracce di Performance, DevTools offre un insieme completo di strumenti basati sull'AI per semplificare i tuoi flussi di lavoro.

  • Correzioni dello stile end-to-end: chiedi a Gemini di correggere i problemi CSS e, in combinazione con Workspace, salva le modifiche direttamente nei file di origine sul disco.
  • Chiedere informazioni sul rendimento:ora puoi discutere di una traccia completa del rendimento con l'assistenza dell'AI oppure analizzare in dettaglio qualsiasi approfondimento sul rendimento o utilizzare Gemini per annotare una traccia.
  • Debug visivo: il riquadro dell'assistenza AI è diventato multimodale, consentendoti di caricare immagini o fare screenshot per aiutare Gemini a comprendere e risolvere i problemi visivi.

Rendimento

Abbiamo riprogettato il pannello Prestazioni per rendere il debug delle prestazioni meno opprimente e più pratico. Ad esempio, una traccia registrata ora include informazioni curate che ti aiutano a identificare più rapidamente i colli di bottiglia e a navigare più velocemente tra le tracce. Altri miglioramenti includono:

Piattaforma web

DevTools ha tenuto il passo con l'evoluzione della piattaforma web, aggiungendo strumenti dedicati per le ultime specifiche CSS e migliorando l'esperienza degli sviluppatori per le funzionalità consolidate.

Abbiamo aggiunto il tracciamento approfondito per le catene di variabili CSS complesse, la disponibilità di Baseline nei suggerimenti delle proprietà e, di recente, abbiamo introdotto il supporto per il debug delle animazioni di ingresso complesse utilizzando la regola @starting-style e un editor visivo per il nuovo layout display: masonry.

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.