Novità di DevTools, Chrome 143

Aggiornamenti del server MCP di DevTools

Abbiamo apportato vari miglioramenti al server MCP di DevTools e rilasciato la versione 0.11.0.

  • Quando utilizzi i prompt nel client MCP (Gemini CLI, Cursor, ecc.), ora puoi fare riferimento agli elementi e alle richieste di rete selezionati nei pannelli Elementi e Rete.
  • Lo strumento list_console_messages ora include anche i problemi rilevati nel riquadro Problemi.
  • Il nuovo strumento press_key ora può essere utilizzato per eseguire il debug degli eventi della tastiera non correlati agli elementi del modulo
  • Gli snapshot dell'albero dell'accessibilità ora possono essere salvati su disco
  • Ora le pagine possono essere ricaricate, con la cache ignorata facoltativamente
  • Configura il flag --user-data-dir per utilizzare un profilo Chrome esistente

Consulta il changelog pubblico su GitHub per l'elenco completo delle modifiche e delle correzioni di bug e scopri di più sul server MCP di DevTools nel post del blog dell'annuncio.

Condivisione delle tracce migliorata

La finestra di dialogo per la condivisione delle tracce nel riquadro Prestazioni

Quando esporti una traccia delle prestazioni, ora puoi includere dati aggiuntivi nel file esportato per semplificare il debug futuro per te o per un collega. Ora puoi scegliere di includere quanto segue:

  • Contenuto delle risorse: una copia di tutti i file HTML, CSS e JavaScript (esclusi gli script di estensione)
  • Mappe di origine degli script: mappature del codice creato, che ti consentono di visualizzare i nomi delle funzioni e i file di origine originali.

Scopri cosa condividere e cosa è meglio mantenere privato nella documentazione aggiornata.

Vogliamo ringraziare i nostri colleghi di Microsoft, con la cui collaborazione è stato possibile raggiungere questo risultato e che hanno guidato il lavoro iniziale.

Supporto per @starting-style

Il riquadro Elementi ora supporta il debug della nuova regola CSS @starting-style, essenziale per creare animazioni di ingresso.

Ora puoi visualizzare un indicatore starting-style nell'albero Elementi accanto agli elementi pertinenti, attivare/disattivare lo stato starting-style dell'elemento facendo clic sul badge e ispezionare ed eseguire il debug del blocco @starting-style nella scheda Stili.

Widget dell'editor per la visualizzazione: muratura

Se provi il layout CSS Masonry, ora puoi utilizzare lo stesso widget dell'editor che conosci già dai layout display, flex e grid per passare rapidamente tra le varie opzioni di allineamento nei layout masonry.

Faro 13

Il riquadro Lighthouse ora esegue Lighthouse 13. Con questo traguardo, il lavoro di unificazione degli approfondimenti sul rendimento in DevTools e Lighthouse si conclude.

Scopri di più nel post del blog relativo all'annuncio. Per scoprire a cosa serve Lighthouse e come si collega al pannello Rendimento in DevTools, consulta Lighthouse: ottimizza il tuo sito web.

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.