Novità di DevTools, Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Pannello Privacy e sicurezza

Il vecchio riquadro Sicurezza è diventato Privacy e sicurezza e include una nuova sezione dedicata alla privacy. In questa sezione puoi:

  • Quando DevTools è aperto, limita temporaneamente i cookie di terze parti con o senza eccezioni e testa il comportamento di un sito web.
  • Visualizza una tabella con informazioni sui cookie di terze parti, ad esempio se sono stati bloccati o esentati dalla modalità di limitazione temporanea e su quale tipo di cookie potrebbe essere influenzato.

Prima e dopo l'aggiunta della sezione Privacy al riquadro Sicurezza.

Problema di Chromium: 352364594.

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al riquadro Rendimento.

Preimpostazioni per la limitazione della CPU calibrate

Ora puoi calibrare automaticamente e ottenere due preset di limitazione della CPU aggiuntivi che approssimano con maggiore precisione i dispositivi mobili di fascia bassa e media.

Nel menu a discesa Rendimento > Throttling della CPU, seleziona Calibra…, quindi in Impostazioni fai clic su Calibra, Continua e attendi che DevTools calcoli le percentuali di rallentamento per il tuo dispositivo. Puoi trovare le opzioni di throttling calibrate nel menu a discesa Rendimento > Throttling della CPU.

Prima e dopo l'aggiunta della calibrazione della limitazione.

Selezionare diversi eventi di rendimento nella stessa chat IA

Il riquadro Assistenza AI ora ti consente di modificare l'evento selezionato nella traccia del rendimento nella stessa chat. In altre parole, non devi avviare una nuova chat per parlare di un altro evento.

Evidenziazione di proprietà proprietarie e di terze parti in Rendimento

Il riquadro Rendimento include una nuova tabella nella scheda Riepilogo che consente di distinguere tra dati proprietari, di terze parti ed estensioni.

Passa il mouse sopra le voci nella tabella per visualizzare gli eventi pertinenti evidenziati nella traccia del rendimento. Seleziona Dim terze parti per concentrarti solo sui dati proprietari.

Inoltre, fai clic sull'icona accanto a una voce evidenziata nella tabella per passare alla scheda Dal basso verso l'alto raggruppata per terze parti.

Dati di campo nelle descrizioni comando e negli approfondimenti degli indicatori

Se hai attivato i dati dei campi, ora puoi visualizzarli nelle descrizioni comando degli indicatori delle metriche e nella scheda Approfondimenti.

Prima e dopo l'aggiunta dei dati archiviati alle descrizioni comando degli indicatori e alla scheda Approfondimenti.

Problema di Chromium: 368135130.

Approfondimento "Adattamento dinamico forzato del contenuto"

Alla scheda Rendimento > Approfondimenti è stato aggiunto un nuovo elemento all'insieme di approfondimenti: Riallocazione forzata. Il riflussaggio forzato si verifica quando il motore di rendering mette in pausa l'esecuzione dello script per calcolare lo stile e il layout. I ricollegamenti forzati possono rappresentare dei colli di bottiglia da evitare.

Quando passi il mouse sopra il nuovo insight, viene evidenziata la chiamata di funzione principale con un ricoinvolgimento forzato, la relativa traccia dello stack e il tempo di ricoinvolgimento totale.

Prima e dopo l'aggiunta dell'approfondimento "Riallocazione forzata".

Problema di Chromium: 369766156.

Approfondimento "Ottimizza le dimensioni del DOM"

Un altro nuovo insight è Ottimizza le dimensioni del DOM. Un albero DOM di grandi dimensioni può rallentare le prestazioni della pagina.

L'approfondimento mette in evidenza gli adattamenti dinamici del layout e i ricolleggi degli stili lunghi che sono stati interessati da un DOM di grandi dimensioni nella traccia del rendimento e fornisce statistiche sugli elementi totali, sulla profondità e sulla maggior parte degli elementi secondari.

Prima e dopo l'aggiunta dell'approfondimento "Ottimizza le dimensioni del DOM".

Estendere il rilevamento del rendimento con console.timeStamp

L'API Extensibility ora supportaconsole.timeStamp. Oltre a performance.measure e performance.mark, ora puoi creare canali personalizzati nella traccia del rendimento e acquisire indicatori personalizzati utilizzando console.timeStamp, un'alternativa più leggera che non aggiunge voci alla sequenza temporale del rendimento interna del browser, ma le mostra solo nella traccia del rendimento.

Ad esempio, puoi utilizzare la seguente sintassi:

console.timeStamp("Start");
// Some time later ...
console.timeStamp("End");
// Some time later ...
console.timeStamp("Measure 1", "Start", "End", "Track 1");
// Some time later ...
console.timeStamp("Measure 2", "Start", undefined, "Track 1");

Con Impostazioni di acquisizione > Mostra canali personalizzati, vedrai il canale personalizzato nella traccia:

Prima e dopo l'aggiunta del supporto di console.timeStamp.

Miglioramenti al riquadro Elementi

Questa versione introduce una serie di miglioramenti al riquadro Elementi.

Valori in tempo reale degli stili animati

La scheda Elementi > Stili ora aggiorna i valori degli stili animati in tempo reale.

Supporto per l'pseudo-classe :open e vari pseudo-elementi

Il riquadro Elementi ora supporta la pseudo-classe :open nella sezione Stili > :hov > Forza stato elemento specifico per determinati elementi HTML come <details>, <select>, <dialog> e <input>.

Prima e dopo l&#39;aggiunta dell&#39;opzione &quot;:open&quot;.

Inoltre, il riquadro Elementi ora supporta anche diversi nuovi pseudo-elementi: ::checkmark, ::picker-icon e relativi al carosello ::column, ::scroll-button, ::scroll-marker e ::scroll-marker-group.

Problemi di Chromium: 383157184, 379805728.

Copia tutti i messaggi della console

Ora puoi copiare tutti i messaggi della console con un clic con il tasto destro del mouse.

Prima e dopo l&#39;aggiunta dell&#39;opzione &quot;Copia console&quot;.

Inoltre, puoi trovare un'opzione di copia simile nel menu contestuale di Rete > Payload richiesta.

Problemi di Chromium: 40206460, 384967020.

Unità di byte nel riquadro Memoria

Il riquadro Memoria ora mostra le dimensioni con unità di byte appropriate anziché con numeri di byte elevati.

Prima e dopo la visualizzazione delle unità di byte.

Problema di Chromium: 388589515.

Altri punti salienti

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

  • Rendimento:
    • Annotazioni: ora puoi fare clic sull'etichetta per selezionare la voce corrispondente (crbug.com/388224764).
    • Approfondimenti: se fai clic su CLS nella scheda Approfondimenti, ora viene selezionato il cluster peggiore anziché la variazione peggiore.
  • Elenco di ignorati: gli elementi interni del nodo che iniziano con node: ora vengono ignorati per impostazione predefinita (crbug.com/382453615).
  • Espressioni in tempo reale: è stato corretto un bug che causava l'influenza dell'espressione in tempo reale sul comando $_ (crbug.com/388437265).
  • Elementi > Stili: le lunghezze relative ora hanno un popup che mostra il valore assoluto (crbug.com/40778486).
  • Accessibilità: le intestazioni delle colonne ora annunciano se sono ordinabili.
  • Le icone delle schede ora si trovano a destra, accanto ai nomi delle schede, anziché a sinistra.

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.