Novità di DevTools, Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

Miglioramenti del riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al pannello Rendimento.

Nuovi approfondimenti sul rendimento

La scheda Rendimento > Approfondimenti riceve nuovi approfondimenti:

  • HTTP moderno che evidenzia le richieste che utilizzano il vecchio protocollo HTTP/1.1.
  • Utilizza durate della memorizzazione nella cache efficienti che evidenziano le richieste che potrebbero trarre vantaggio da durate della memorizzazione nella cache più lunghe e velocizzare il tempo di caricamento del tuo sito web.
  • Visualizzazione dei caratteri che mostra il risparmio di tempo stimato se ottimizzi font-display.

Tre nuovi approfondimenti nella scheda Approfondimenti.

Fai clic per evidenziare

Ora puoi fare clic sugli elementi nelle tabelle Riepilogo, Dal basso verso l'alto, Albero delle chiamate e Log eventi per mantenere gli eventi corrispondenti evidenziati nella traccia e oscurare il resto mentre navighi nella traccia delle prestazioni.

Tempi del server nel riepilogo delle richieste di rete

La scheda Riepilogo nel riquadro Rendimento ora mostra i tempi del server per le richieste di rete che implementano tecnologie di rendering lato server.

La tabella "Tempi del server" nel riepilogo di una richiesta di rete.

Il riquadro Rendimento prende i dati dall'intestazione Server-Timing.

Filtrare i cookie in "Privacy e sicurezza"

La tabella nella sezione Privacy e sicurezza > Privacy > Cookie di terze parti viene filtrata, in modo da trovare più rapidamente i cookie che ti interessano.

Il filtro nella tabella "Cookie di terze parti".

Dimensioni in unità kB nelle tabelle di tutti i riquadri

Per mantenere le stesse unità all'interno dello stesso contesto, le tabelle nei riquadri Rete e Memoria e la tabella 1p / 3p in Rendimento > Riepilogo ora mostrano tutte le dimensioni in kB. In questo modo, puoi confrontare direttamente i numeri nella stessa colonna e nei vari pannelli, anziché tenere d'occhio le unità MB, kB e B.

Prima e dopo l'unificazione delle unità di misura.

Il completamento automatico supporta corner-shape e corner-*-shape in Elementi > Stili

Il completamento automatico in Elementi > Stili ora può suggerire i valori corrispondenti per le proprietà corner-shape e corner-*-shape.

Le opzioni di completamento automatico per la proprietà "forma dell'angolo".

Problema di Chromium: 402346406.

Sperimentale: evidenziazione dei problemi relativi a elementi e attributi nel DOM

Con questa nuova funzionalità sperimentale, il riquadro Elementi ora può evidenziare i problemi relativi agli elementi DOM o agli attributi con una sottolineatura rossa ondulata. Passa il mouse sopra questi elementi o attributi per visualizzare un suggerimento con un link all'errore corrispondente nel riquadro Problemi.

Il prima e il dopo che evidenziano un problema del DOM nell'albero DOM con una descrizione comando e un link al riquadro Problemi.

Il riquadro Elementi attualmente evidenzia i discendenti non validi di <select>, le definizioni ARIA non corrispondenti e gli attributi ARIA non validi.

Problema di Chromium: 378738916.

Lighthouse 12.5.0

Il riquadro Lighthouse ora esegue Lighthouse 12.5.0.

In particolare, in questa versione legacy-javascript ora utilizza Baseline anziché esmodules. 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: 40543651.

Punti salienti vari

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

  • Rendimento > Approfondimenti > Albero delle dipendenze di rete: ora mostra il tempo per tutte le richieste di rete nell'albero di rete (400708304).
    • Albero delle dipendenze di rete: ora mostra l'ora per tutte le richieste di rete nell'albero di rete (400708304).
  • Animazioni: è stato corretto un bug che causava la visualizzazione di elementi separati nel riquadro Memoria a causa delle animazioni acquisite 400635410.
  • Registratore: ora utilizza la stessa finestra di dialogo di conferma dell'incollatura del codice quando si esegue la registrazione per la prima volta.
  • Livelli: ora mostra il numero totale di livelli e la memoria totale per tutti i livelli visibili nella barra di stato in basso.
  • Memoria: l'inizializzazione dello snapshot dell'heap è stata migliorata parallelizzando le attività tra due worker anziché utilizzarne uno (42203857).
  • Problemi: ora segnala gli errori CORS di accesso alla rete locale (LNA) (395895368).
  • Accessibilità:
    • Descrizioni comando: ora vengono visualizzate alla pressione dei tasti di scelta rapida anziché quando viene impostato lo stato attivo (396311936).
    • Elementi > Stili: ora è possibile interagire con la funzione var() tramite tastiera, il che significa che puoi selezionare --custom-property e premere Invio per andare alla destinazione del link (401212692).

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.