Novità di DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova

Registratore supporta l'esportazione in Puppeteer per Firefox

Grazie al supporto di WebDriver BiDi, il riquadro Registratore ora può esportare le registrazioni in Puppeteer per Firefox. Grazie al supporto di Firefox da parte di Puppeteer, ora puoi registrare i flussi degli utenti utilizzando il riquadro Registratore di Chrome DevTools, esportarli ed eseguirli sia su Firefox che su Chrome.

L'immagine prima e dopo l'aggiunta dell'opzione "Puppeteer per Firefox" al menu di esportazione di Registratore.

Per ulteriori informazioni, vedi WebDriver BiDi - The future of cross-browser automation (Il futuro dell'automazione cross-browser).

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al riquadro Prestazioni,

Osservazioni delle metriche in tempo reale

Il riquadro Rendimento ora mostra osservazioni in tempo reale sui Segnali web essenziali, sia sul computer locale sia in base ai dati sul campo del Report sull'esperienza utente di Chrome. In questo modo puoi individuare i problemi di prestazioni senza dover acquisire dati relativi alle prestazioni e comprendere quanto sia rappresentativa la tua esperienza rispetto a quella degli utenti.

Per visualizzare le osservazioni in tempo reale su LCP e CLS, apri il riquadro Rendimento. Per visualizzare l'INP, esegui un'interazione su una pagina. Per confrontare le metriche locali con l'esperienza utente aggregata del Report sull'esperienza utente di Chrome, aggiungi i dati dei campi: nella sezione Dati dei campi a destra, fai clic su Configura e, nella finestra di dialogo, fai clic su Ok. Passa il mouse sopra un valore della metrica per visualizzare una descrizione comando con ulteriori informazioni.

Osservazioni in tempo reale sulle metriche nel riquadro Rendimento.

Il riquadro Rendimento mette in evidenza le metriche che possono essere migliorate e fornisce approfondimenti e suggerimenti su come allineare la tua esperienza locale a quella dei tuoi utenti. Ad esempio, potresti voler limitare la CPU o la rete, cosa che puoi fare nella stessa schermata nella sezione Impostazioni di registrazione a destra.

La casella Ricerca nel riquadro Rendimento ora funziona anche su tutta la traccia Rete, quindi puoi trovare le richieste con la scorciatoia Ctrl / Cmd + F.

Una richiesta di rete trovata con la ricerca.

Visualizzare le tracce dello stack delle chiamate performance.mark e performance.measure

Nella scheda Riepilogo, il riquadro Rendimento ora mostra le tracce dello stack delle chiamate performance.mark e performance.measure. Puoi utilizzare queste chiamate per estendere la traccia del rendimento con i tuoi dati personalizzati.

Prima e dopo che mostra le analisi dello stack per performance.mark e performance. Misura le chiamate.

Per saperne di più, consulta Personalizzare i dati sul rendimento con l'API di estensioni.

Utilizzare i dati dell'indirizzo di prova nel riquadro Compilazione automatica

Il riquadro Compilazione automatica ora fornisce dati di test per i moduli degli indirizzi. In questo modo è più semplice testare i moduli degli indirizzi sul tuo sito web quando non hai indirizzi salvati in Chrome o se utilizzi un profilo ospite.

Per compilare automaticamente i moduli degli indirizzi con i dati di test, apri il riquadro Compilazione automatica, attiva l'opzione Mostra indirizzi di prova nel menu di compilazione automatica, fai clic con il tasto destro del mouse su un modulo di indirizzo inserito nella pagina e seleziona una delle opzioni dal menu Strumenti per gli sviluppatori.

Prima e dopo l'aggiunta delle opzioni dei dati di test della compilazione automatica al menu a discesa del campo di un modulo per l'indirizzo.

Miglioramenti al riquadro Elementi

Questa versione introduce un paio di miglioramenti al riquadro Elementi.

Forzare più stati per elementi specifici

La sezione :hov in Elementi > Stili ora fornisce più pseudo-classi che puoi attivare forzatamente. Il nuovo insieme di opzioni si trova nel menu a discesa dello stato Forza elemento specifico ed è specifico per alcuni elementi selezionati. Ad esempio, <label> e <input> hanno insiemi di opzioni diversi.

Prima e dopo l&#39;aggiunta della possibilità di forzare stati di elementi specifici.

Problema relativo a Chromium: 40280012.

La sezione Elementi > Stili ora completa automaticamente più proprietà della griglia

La scheda Elementi > Stili ora fornisce opzioni di completamento automatico quando modifichi l'area della griglia e i nomi delle linee.

Le opzioni di completamento automatico prima e dopo l&#39;aggiunta di opzioni di completamento automatico quando modifichi i nomi delle linee della griglia.

Per maggiori informazioni, consulta in particolare Esaminare i layout della griglia CSS e la sezione Mostrare nomi delle linee.

Lighthouse 12.2.0

Il pannello Lighthouse ora esegue Lighthouse 12.2.0.

Questo aggiornamento introduce una serie di correzioni di bug. Consulta 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: 772558.

Varie in evidenza

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

  • Elementi:
    • È stato corretto un bug relativo al rendering errato delle proprietà di lunghezza sovraccaricate 357020613.
    • position-try-options rinominato in position-try-fallbacks come da specifica.
    • L'aggiornamento della pagina ora ripristina il nodo selezionato anche all'interno di un iframe 40719145.
    • Accessibilità: ora gli screen reader annunciano il pulsante Mostra elemento 357382536.
  • Rendimento > Rete: l'opzione di menu Mostra nella rete ora consente di aprire la scheda Intestazioni della richiesta della rete pertinente.
  • Console:
    • Gli errori dell'estensione C/C++ ora non aprono forzatamente la console 356320158.
    • È stato corretto un bug relativo a import.meta in un modulo JS che non veniva valutato quando il prodotto era in pausa 40743793.
  • Memoria: è stato corretto un bug per cui Ripristina gli elementi di conservazione ignorati non venivano visualizzati dopo aver ignorato un elemento di conservazione 327337527.

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 danno accesso alle ultime funzionalità di DevTools, ti consentono di testare le API delle piattaforme web all'avanguardia e ti aiutano a individuare i problemi sul tuo sito prima che lo facciano gli 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.