Novità di DevTools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Nuovo riquadro Compilazione automatica

Questa versione introduce il nuovo riquadro Compilazione automatica in DevTools. La compilazione automatica di Chrome offre un modo pratico per compilare automaticamente i moduli sui siti web con gli indirizzi salvati. Il nuovo pannello Completamento automatico ti consente di controllare la mappatura tra i campi del modulo, i valori di completamento automatico previsti e i dati salvati.

Prova il nuovo riquadro in questa pagina di demo con i dati di test:

  1. In Completamento automatico del profilo, fai clic su uno dei pulsanti Compila il modulo, poi su Invia e, nella finestra di dialogo Salva indirizzo?, fai clic su Salva e torna alla pagina con il modulo.
  2. Apri DevTools e attiva un evento di compilazione automatica: seleziona un campo del modulo e scegli l'indirizzo dall'elenco a discesa.

Il riquadro Compilazione automatica si apre automaticamente e mostra i campi del modulo rilevati, i campi dedotti dalla compilazione automatica e i valori salvati.

Il riquadro Compilazione automatica.

Per saperne di più, consulta Imparare a utilizzare Moduli e Compilazione automatica.

Limitazione della rete migliorata per WebRTC

Grazie all'aggiunta di parametri relativi ai pacchetti ai profili di limitazione della rete personalizzati, ora puoi limitare le applicazioni WebRTC direttamente in DevTools. Questo è utile per testare l'implementazione della comunicazione in tempo reale, senza dover utilizzare software di terze parti.

I nuovi parametri sono: Packet Loss (percentuale), Packet Queue Length (numero di pacchetti) e il flag Packet Reordering.

La situazione prima e dopo l'aggiunta di nuove opzioni relative ai pacchetti ai profili di throttling personalizzati.

Per limitare una connessione WebRTC, specifica i parametri relativi ai pacchetti in un profilo personalizzato in Impostazioni > Limitazione e selezionalo nel riquadro Rete.

Prova i nuovi parametri in questa pagina dimostrativa. Innanzitutto, consenti alla pagina di utilizzare la fotocamera. Poi, nel riquadro Rete, seleziona il profilo personalizzato che hai configurato e, nella pagina, fai clic su Avvia e Chiama.

Problema di Chromium: 41175925.

Supporto delle animazioni basate sullo scorrimento nel riquadro Animazioni

Il riquadro Animazioni ora ti consente di ispezionare le animazioni basate sullo scorrimento.

Prova questa funzionalità in questa pagina dimostrativa. Apri il riquadro Animazioni e ricarica la pagina per acquisire le animazioni basate sullo scorrimento.

Un gruppo di animazioni basate sullo scorrimento contrassegnate da un'icona del mouse.

In Panoramica viene visualizzato un gruppo di animazioni contrassegnato da un'icona a forma di . Ora puoi esaminare. Il gruppo mostra i valori dei pixel anziché i millisecondi nella sequenza temporale.

Miglioramento del supporto di nidificazione CSS in Elementi > Stili

La scheda Elementi > Stili migliora il supporto del nidificazione CSS e ora mostra gli stili nidificati con rientro e tra parentesi graffe. Il nidificazione CSS è un modo per raggruppare le regole CSS e rendere il codice meno prolisso e più strutturato.

Prima e dopo l'aggiunta di rientri e l'inserimento di parentesi graffe per racchiudere gli stili nidificati.

Problema di Chromium: 40166888.

Riquadro Prestazioni avanzate

Questa versione introduce diversi miglioramenti al riquadro Rendimento.

Nascondere le funzioni e i relativi elementi secondari nel grafico a forma di fiamma

Per filtrare il rumore dal grafico a forma di fiamma in Rendimento > Principale, ora puoi nascondere le funzioni irrilevanti e i relativi elementi secondari. Nel grafico a forma di fiamma, fai clic con il tasto destro del mouse su una funzione e scegli un'opzione dal menu contestuale.

Prima e dopo l'aggiunta di un menu contestuale che ti consente di nascondere le funzioni e le relative sottofunzioni.

Le funzioni con elementi secondari nascosti hanno un pulsante Menu a discesa a destra. Passa il mouse sopra l'opzione per visualizzare il numero di elementi secondari nascosti e fai clic per visualizzarli di nuovo. Per tornare allo stato iniziale del grafico a forma di fiamma, fai clic con il tasto destro del mouse su una funzione e seleziona Reimposta traccia.

Frecce dagli iniziatori selezionati agli eventi che hanno avviato

In precedenza, quando selezionavi un evento nel canale Principale, il canale mostrava una freccia dal suo iniziatore all'evento selezionato. Ora il canale mostra anche una freccia dall'evento selezionato a quello che ha avviato, se presente.

Le frecce prima e dopo che mostrano gli eventi selezionati e avviati e i link denominati anziché la visualizzazione.

Inoltre, tutti gli iniziatori ora hanno i campi Autore per nella scheda Riepilogo e sia i campi Autore per che Avvio da hanno link denominati anziché Mostra.

Problemi di Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Il pannello Lighthouse ora esegue Lighthouse 11.6.0. Consulta l'elenco completo delle modifiche.

Tra le modifiche più importanti, spicca la nuova impostazione di attivazione Abilita campionamento di JS. Questa impostazione è disattivata per impostazione predefinita.

Prima e dopo l'aggiunta di un'impostazione di attivazione del campionamento di JS.

L'attivazione del campionamento JS aggiunge stack di chiamate JavaScript dettagliati alla traccia del rendimento, ma potrebbe rallentare la generazione dei report.

Traccia delle prestazioni senza (a sinistra) e con (a destra) il campionamento di JS.

La traccia è disponibile in Menu Strumenti > Visualizza traccia non limitata dopo la generazione del report Lighthouse.

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.

Descrizioni comando per le categorie speciali in Memoria > Istantanee dell'heap

Le istantanee dell'heap nel riquadro Memoria hanno gruppi speciali di oggetti che non si basano sui costruttori. Quando passi il mouse sopra questi oggetti, il riquadro Memoria ora mostra una descrizione comando con una breve descrizione e un link a una descrizione più lunga nella documentazione.

Le immagini prima e dopo mostrano una descrizione comando per gruppi speciali di oggetti.

Problema di Chromium: 41490331.

Applicazione > Aggiornamenti dello spazio di archiviazione

Questa versione include un paio di aggiornamenti in App > Memoria.

Byte utilizzati per lo spazio di archiviazione condiviso

La sezione Applicazione > Spazio di archiviazione > Spazio di archiviazione condiviso ora mostra il numero di byte utilizzati da un'origine.

Le immagini prima e dopo mostrano quanti byte vengono utilizzati per lo spazio di archiviazione condiviso.

Lo spazio di archiviazione condiviso ti consente di avere accesso illimitato in scrittura allo spazio di archiviazione tra siti con accesso in lettura incentrato sulla tutela della privacy.

Problema di Chromium: 324464353.

SQL web è completamente deprecato

Chrome ha ritirato Web SQL nella versione 119 e ha rimosso il token di prova del ritiro in questa versione, pertanto non puoi più utilizzare Web SQL.

Di conseguenza, DevTools ha rimosso la sezione Web SQL dal riquadro Applicazione.

Problema di Chromium: 327254049.

Miglioramenti al riquadro Copertura

Questa versione introduce un paio di aggiornamenti al riquadro Copertura:

  • La barra di stato ora calcola correttamente le statistiche di utilizzo per gli URL filtrati. In precedenza, invece di sommare i dati di utilizzo dei bambini corrispondenti al filtro, venivano sommati i dati del loro account principale.

Le immagini prima e dopo il calcolo corretto delle statistiche relative ai bambini corrispondenti.

  • Il colore del codice utilizzato ora è grigio anziché verde per migliorare la visibilità, in particolare per la dislessia cromatica verde.

L'immagine prima e dopo la modifica del colore del codice utilizzato in grigio.

Problema di Chromium: 41494198, 329253687.

Il riquadro Livelli potrebbe essere ritirato

Il riquadro Livelli potrebbe essere ritirato a breve a causa del suo scarso utilizzo. Ora il riquadro mostra un banner di avviso nella parte superiore.

Il banner di avviso che annuncia la potenziale ritiro nella parte superiore del riquadro Livelli.

Non esitare a condividere le tue opinioni e i tuoi dubbi prima che il team prenda la decisione finale di ritirare il riquadro.

Ritiro del profiler di JavaScript: fase quattro, finale

In questa versione, il riquadro JS Profiler è stato completamente ritirato e non può più essere riattivato.

Per creare un profilo delle prestazioni della CPU, utilizza il riquadro Prestazioni.

Problema di Chromium: 40262073.

Altri punti salienti

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

  • Rete:
    • È stato corretto un bug relativo all'analisi non corretta dei cookie multiriga (325410304).
    • È stata corretta l'anteprima dello stack di chiamate nella colonna Initiator (327665602).
  • Monitoraggio delle prestazioni: le caselle di controllo Monitora ora sono le stesse del resto dell'interfaccia utente (1467464).
  • Origini: è stato aggiunto l'evidenziazione della sintassi per i documenti XHTML (327940244).
  • Impostazioni > Dispositivi: il vecchio Galaxy Fold viene sostituito con il nuovo Galaxy Z Fold 5 (40113439).
  • Prestazioni: tutti i risultati di ricerca corrispondenti sono ora evidenziati quando esegui una ricerca con Ctrl/Cmd+F (1523279).
  • Risorse per sviluppatori: ora vengono mostrate anche le risorse caricate tramite estensioni di linguaggi, ad esempio l'estensione di Chrome per il supporto di DevTools C/C++ (DWARF) (40746829).
  • Rendimento: è stato corretto lo stack delle chiamate ritagliato e il relativo layout errato nella scheda Riepilogo (325314708).
  • Riquadro a scomparsa: i pulsanti Chiudi ora sono accessibili, quindi i riquadri possono essere chiusi utilizzando la tastiera.

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.