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 riquadro Registratore di Chrome DevTools, esportarli ed eseguirli su Firefox e Chrome.

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

Per ulteriori informazioni, consulta WebDriver BiDi - The future of cross-browser automation.

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al riquadro Rendimento.

Osservazioni sulle 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 rilevare i problemi di prestazioni senza dover acquisire 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 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 Cerca nel riquadro Rendimento ora funziona anche nel canale 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 a 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.

Le immagini prima e dopo mostrano le tracce dello stack per le chiamate performance.mark e performance. measure.

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ù facile testare i moduli degli indirizzi sul tuo sito web se 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.

Le immagini prima e dopo l'aggiunta delle opzioni di dati di test della compilazione automatica a un menu a discesa del campo del modulo di 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 offre più pseudoclassi 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 insiemi di opzioni diversi.

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

Problema di 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 i nomi delle aree della griglia e delle linee.

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

Per ulteriori informazioni, consulta la sezione Esaminare i layout di griglia CSS e in particolare la sezione Mostrare i nomi delle righe.

Lighthouse 12.2.0

Il pannello Lighthouse ora esegue Lighthouse 12.2.0.

Questo aggiornamento include 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.

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti significativi di questa release:

  • Elementi:
    • È stato corretto un bug relativo al rendering errato delle proprietà di lunghezza sovraccaricate 357020613.
    • position-try-options è stato rinominato in position-try-fallbacks in base alla specifica.
    • Ora un aggiornamento della pagina 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 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 veniva valutato in caso di messa in pausa 40743793.
  • Memoria: è stato corretto un bug relativo alla mancata visualizzazione dell'opzione Ripristina elementi di conservazione ignorati 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 consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi 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.