Novità di DevTools, Chrome 136

Sofia Emelianova
Sofia Emelianova
GitHub

Miglioramenti al riquadro Prestazioni

Questa versione introduce una serie di miglioramenti al riquadro Rendimento.

Nuovi approfondimenti sul rendimento

La scheda Rendimento > Approfondimenti include nuovi approfondimenti:

  • HTTP moderno che evidenzia le richieste che utilizzano il vecchio protocollo HTTP/1.1.
  • Utilizza durate della memorizzazione nella cache efficienti che mettano in evidenza le richieste che potrebbero trarre vantaggio da durate più lunghe della memorizzazione nella cache 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 delle tabelle Riepilogo, Dal basso verso l'alto, Albero chiamate e Log eventi per mantenere gli eventi corrispondenti evidenziati nella traccia e attenuare gli altri mentre navighi nella traccia del rendimento.

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 acquisisce i dati dall'intestazione Server-Timing della risposta.

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ù velocemente i cookie che ti interessano.

Il filtro nella tabella "Cookie di terze parti".

Dimensioni in unità di kilobyte nelle tabelle dei riquadri

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

Le unità di misura delle dimensioni prima e dopo l'unificazione.

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-raccordo".

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 o agli attributi DOM con un'onda rossa sottolineata. Passa il mouse sopra questi elementi o attributi per visualizzare una descrizione comando con un link all'errore corrispondente nel riquadro Problemi.

L'immagine prima e dopo l'evidenziazione di un problema DOM nell'albero DOM con una descrizione comando e un link al riquadro Problemi.

Al momento, il riquadro Elementi 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 questa versione, in particolare, legacy-javascript ora utilizza Base anziché esmodules. 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: 40543651.

Altri punti salienti

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

  • Rendimento > Approfondimenti > Albero delle dipendenze di rete: ora viene mostrato il tempo per tutte le richieste di rete nell'albero di rete (400708304).
    • Albero delle dipendenze di rete: ora viene mostrato il tempo per tutte le richieste di rete nell'albero di rete (400708304).
  • Animazioni: è stato corretto un bug che causava la visualizzazione di elementi scollegati nel riquadro Ricordo a causa delle animazioni acquisite 400635410.
  • Registratore: ora utilizza la stessa finestra di dialogo di conferma del codice incollato quando esegui la registrazione per la prima volta.
  • Livelli: ora mostra il numero totale di livelli e la memoria totale di 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 vengono segnalati gli errori CORS di Accesso alla rete locale (LNA) (395895368).
  • Accessibilità:
    • Descrizioni comando: ora vengono visualizzate quando si preme la hotkey anziché quando si attiva lo stato attivo (396311936).
    • Elementi > Stili: ora è possibile interagire con la funzione var() tramite la tastiera, il che significa che puoi selezionare --custom-property e premere Invio per passare al target del link (401212692).

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 gli 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.