Novità di DevTools, Chrome 129

Sofia Emelianova
Sofia Emelianova

Registratore supporta l'esportazione in Puppeteer per Firefox

Nell'ambito del 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 utente utilizzando il pannello Registratore di Chrome DevTools, esportarli ed eseguirli sia su Firefox che su Chrome.

Prima e dopo l'aggiunta dell'opzione "Puppeteer per Firefox" al menu di esportazione del registratore.

Per ulteriori informazioni, vedi WebDriver BiDi: il futuro dell'automazione cross-browser.

Miglioramenti del riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Osservazioni sulle metriche in tempo reale

Il riquadro Rendimento ora mostra osservazioni in tempo reale sui Segnali web essenziali, sia sulla macchina locale sia in base ai dati sul campo del Chrome UX Report. In questo modo puoi individuare i problemi di prestazioni senza dover acquisire le tracce delle prestazioni e capire quanto è rappresentativa la tua esperienza rispetto a quella dei tuoi 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 Chrome UX Report, 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 di metrica per visualizzare una descrizione comando con ulteriori informazioni.

Osservazioni in tempo reale sulle metriche nel riquadro Rendimento.

Il pannello Rendimento mette in evidenza le metriche che possono essere migliorate e fornisce approfondimenti e suggerimenti su come allineare la tua esperienza locale a quella degli 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 Cerca nel riquadro Rendimento ora funziona anche nella traccia Rete, così puoi trovare le richieste con la scorciatoia Ctrl / Cmd + F.

Una richiesta di rete trovata con la ricerca.

Visualizza le analisi dello stack delle chiamate performance.mark e performance.measure

Nella scheda Riepilogo, il riquadro Rendimento ora mostra le analisi 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 mostrano le analisi dello stack per le chiamate performance.mark e performance. measure.

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

Utilizzare i dati degli indirizzi di test nel riquadro Compilazione automatica

Il pannello Compilazione automatica ora fornisce dati di test per i moduli dell'indirizzo. In questo modo, è più facile testare i moduli dell'indirizzo sul tuo sito web quando non hai indirizzi salvati in Chrome o utilizzi un profilo ospite.

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

Il menu a discesa del campo del modulo dell'indirizzo prima e dopo l'aggiunta delle opzioni dei dati di test della compilazione automatica.

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 offre 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 determinati elementi selezionati. Ad esempio, <label> e <input> hanno diversi set di opzioni.

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

Problema di Chromium: 40280012.

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

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

Prima e dopo l&#39;aggiunta delle opzioni di completamento automatico durante la modifica dei nomi delle linee della griglia.

Per ulteriori informazioni, consulta Ispezionare i layout a griglia CSS e in particolare la sezione Mostra nomi delle linee.

Lighthouse 12.2.0

Il riquadro Lighthouse ora esegue Lighthouse 12.2.0.

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

Punti salienti vari

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

  • Elementi:
    • È stato corretto un bug relativo al rendering errato delle proprietà di lunghezza sovraccariche 357020613.
    • position-try-options è stato rinominato in position-try-fallbacks in base alle specifiche.
    • L'aggiornamento della pagina ora ripristina il nodo selezionato anche all'interno di un iframe 40719145.
    • Accessibilità: gli screen reader ora annunciano il pulsante Mostra elemento 357382536.
  • Rendimento > Rete: l'opzione di menu Mostra in Rete ora apre la scheda Intestazioni della richiesta di 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 viene valutato quando è in pausa 40743793.
  • Memoria: è stato corretto un bug a causa del quale l'opzione Ripristina elementi di conservazione ignorati non veniva visualizzata dopo aver ignorato un elemento di conservazione 327337527.

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.