Novità di DevTools, Chrome 141

Sofia Emelianova
Sofia Emelianova
GitHub

Chrome DevTools (MCP) per il tuo agente AI

Ora puoi dare un'occhiata all'anteprima del nuovo server Model Context Protocol (MCP) di Chrome DevTools. Porta la potenza di Chrome DevTools negli assistenti di programmazione AI.

In precedenza, gli agenti di codifica non erano in grado di vedere cosa fa effettivamente il codice che generano quando viene eseguito nel browser. Il server MCP di Chrome DevTools modifica questo comportamento. Gli assistenti alla codifica AI sono in grado di eseguire il debug delle pagine web direttamente in Chrome e sfruttano le funzionalità di debug e le informazioni sulle prestazioni di DevTools. In questo modo, la loro accuratezza migliora quando identificano e risolvono i problemi.

Scopri come funziona:

Per saperne di più, consulta Chrome DevTools (MCP) per l'agente AI.

Eseguire il debug dell'albero delle dipendenze di rete con Gemini

L'insight Rendimento > Approfondimenti > Albero delle dipendenze di rete ora include il pulsante Debug con l'AI, che ti porta al riquadro Assistenza AI, in modo da poter discutere ed eseguire il debug dell'albero con l'aiuto di Gemini.

Prima e dopo l'aggiunta del pulsante "Esegui il debug con l'AI" all'insight "Albero delle dipendenze di rete".

Esportare le chat con Gemini

Ora puoi esportare la chat attuale con Gemini o copiare la sua risposta negli appunti facendo clic sul pulsante Esporta conversazione nella barra delle azioni in alto o su Copia risposta sotto il messaggio di Gemini nella chat.

Prima e dopo l'aggiunta del pulsante di esportazione e copia all'assistenza dell'AI.

Configurazione delle tracce persistente nel riquadro Rendimento

Quando configuri una traccia registrata nel riquadro Rendimento, DevTools ora salva la configurazione e la applica quando la importi di nuovo o ne registri una nuova.

Filtra le richieste di rete protette da IP

Nel riquadro Rete, ora puoi filtrare le richieste inviate ai proxy di protezione IP.

Prima e dopo l'aggiunta del filtro "Richieste protette da IP" al pannello Rete.

Elementi > La scheda Layout aggiunge il supporto del layout a griglia

Ora puoi esaminare il layout a griglia nella scheda Elementi > Stili.

Il layout a griglia è un metodo di layout in cui un asse utilizza un tipico layout a griglia rigido, il più delle volte le colonne, e l'altro un layout a griglia.

Prima e dopo l'aggiunta del supporto del layout a griglia a Elementi - Layout.

Lighthouse 12.8.2

Il riquadro Lighthouse ora esegue Lighthouse 12.8.2.

In particolare, in questa versione Lighthouse separa i problemi rilevati con le proprietà personalizzate CSS in messaggi di errore distinti.

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 delle numerose correzioni e miglioramenti degni di nota di questa release:

  • Rendimento: gli eventi di richiesta di callback di inattività ora includono la proprietà timeout (crbug.com/441679219).
  • Accessibilità. Gli screen reader leggeranno ora quanto segue:
  • Rete: se fai clic con il tasto destro del mouse su un elemento del log di rete, questo viene selezionato (crbug.com/368510578).

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.