Novità di DevTools, Chrome 134

Sofia Emelianova
Sofia Emelianova
GitHub

Pannello Privacy e sicurezza

Il vecchio riquadro Sicurezza si è evoluto nel riquadro Privacy e sicurezza e ha una nuova sezione dedicata alla privacy. In questa sezione puoi:

  • Mentre DevTools è aperto, limita temporaneamente i cookie di terze parti con o senza eccezioni e verifica il comportamento di un sito web.
  • Visualizza una tabella con informazioni sui cookie di terze parti, inclusi quelli bloccati o esentati dalla modalità di limite temporaneo, e il tipo di cookie che potrebbe essere interessato.

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

Problema di Chromium: 352364594.

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Preimpostazioni calibrate per la limitazione della CPU

Ora puoi calibrare automaticamente e ottenere due preset di limitazione della CPU aggiuntivi che approssimano in modo più accurato i dispositivi mobili di fascia bassa e media.

Nel menu a discesa Prestazioni > Limitazione della CPU, seleziona Calibra…, quindi in Impostazioni fai clic su Calibra, Continua e attendi che gli Strumenti per sviluppatori calcolino i tassi di rallentamento per il tuo dispositivo. Puoi trovare le opzioni di limitazione calibrate nel menu a discesa Rendimento > Limitazione CPU.

Prima e dopo l'aggiunta della calibrazione della limitazione.

Selezionare eventi di rendimento diversi nella stessa chat AI

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 evento diverso.

Evidenziazione dei dati proprietari e di terze parti in Rendimento

Il riquadro Rendimento riceve una nuova tabella nella scheda Riepilogo che ti consente di distinguere tra dati proprietari, di terze parti e delle estensioni.

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

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

Dati dei campi nelle descrizioni comando e negli approfondimenti dei marcatori

Se hai attivato i dati sul campo, ora puoi visualizzarli nelle descrizioni comando dei marcatori delle metriche e nella scheda Approfondimenti.

Prima e dopo l'aggiunta dei dati dei campi alle descrizioni comando dei marcatori e alla scheda Approfondimenti.

Problema di Chromium: 368135130.

Insight "Adattamento dinamico forzato del contenuto"

La scheda Rendimento > Approfondimenti viene arricchita con una nuova informazione: Riflusso forzato. Il reflow forzato si verifica quando il motore di rendering mette in pausa l'esecuzione dello script per calcolare lo stile e il layout. I ricalcoli forzati possono essere colli di bottiglia che ti consigliamo di evitare.

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

Prima e dopo l'aggiunta dell'approfondimento "Reflow forzato".

Problema di Chromium: 369766156.

Approfondimento "Ottimizza le dimensioni del DOM"

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

L'insight evidenzia i lunghi adattamenti dinamici del layout e i ricalcoli dello stile interessati dalle grandi dimensioni del DOM nella traccia del rendimento e fornisce statistiche su elementi totali, profondità e maggior numero di elementi secondari.

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

Estendi il rilevamento del rendimento con console.timeStamp

L'API Extensibility ora supportaconsole.timeStamp. Oltre a performance.measure e performance.mark, ora puoi creare tracce personalizzate nella traccia del rendimento e acquisire indicatori personalizzati utilizzando console.timeStamp, un'alternativa più leggera che non aggiunge voci alla cronologia 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");

Selezionando Impostazioni di acquisizione > Mostra canali personalizzati, vedrai il tuo 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 la 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 correlati 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 con il tasto destro del mouse tutti i messaggi della console contemporaneamente.

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 le unità di byte appropriate anziché numeri elevati di byte.

Prima e dopo la visualizzazione delle unità di byte.

Problema di Chromium: 388589515.

Punti salienti vari

Di seguito sono riportate alcune correzioni e alcuni miglioramenti degni di nota in 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 live: è stato corretto un bug che causava l'effetto dell'espressione live sul comando $_ (crbug.com/388437265).
  • Elementi > Stili: le lunghezze relative ora hanno un popover che mostra il valore assoluto (crbug.com/40778486).
  • Accessibilità: ora le intestazioni delle colonne annunciano se sono ordinabili.
  • Le icone delle schede ora si trovano a destra, accanto ai nomi delle schede, anziché a sinistra.

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.