Novità di DevTools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Nuovo riquadro della 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 Compilazione automatica ti consente di esaminare la mappatura tra i campi del modulo, i valori di compilazione automatica previsti e i dati salvati.

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

  1. In Compilazione automatica del profilo, fai clic su uno dei pulsanti Compila modulo…, fai clic su Invia, quindi, nella finestra di dialogo Salvare l'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 Learn Forms e Compilazione automatica.

Limitazione della larghezza di banda della rete avanzata 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. Ciò è utile per testare l'implementazione della comunicazione in tempo reale senza dover utilizzare software di terze parti.

I nuovi parametri sono: Perdita di pacchetti (percentuale), Lunghezza della coda di pacchetti (numero di pacchetti) e il flag Riordino dei pacchetti.

Prima e dopo l'aggiunta di nuove opzioni relative ai pacchetti ai profili di limitazione 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 a forma di mouse.

Nel riquadro Panoramica viene visualizzato un gruppo di animazioni contrassegnato da un'icona . Ora puoi ispezionarlo. Il gruppo mostra i valori in pixel anziché in millisecondi nella sequenza temporale.

Supporto migliorato per l'annidamento CSS in Elementi > Stili

La scheda Elementi > Stili migliora il supporto dell'annidamento CSS e ora mostra gli stili annidati con rientro e tra parentesi graffe. Il nesting CSS è un modo per raggruppare le regole CSS e rendere le cose meno verbose e più strutturate.

Prima e dopo l'aggiunta del rientro e l'inserimento degli stili nidificati tra parentesi graffe.

Problema di Chromium: 40166888.

Riquadro Prestazioni avanzate

Questa versione introduce diversi miglioramenti al pannello Rendimento.

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

Per filtrare il rumore dal grafico a fiamma in Rendimento > Principale, ora puoi nascondere le funzioni irrilevanti e i relativi elementi secondari. Nel grafico a fiamme, 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 consente di nascondere le funzioni e i relativi elementi secondari.

Le funzioni con elementi secondari nascosti hanno un pulsante menu a discesa a destra. Passa il cursore sopra per visualizzare il numero di elementi secondari nascosti e fai clic per mostrarli di nuovo. Per tornare allo stato iniziale del grafico a 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 nella traccia Principale, la traccia mostrava una freccia dall'iniziatore all'evento selezionato. Ora la traccia mostra anche una freccia dall'evento selezionato a quello che lo ha avviato, se presente.

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

Inoltre, tutti gli autori della richiesta ora hanno campi Autore della richiesta per nella scheda Riepilogo e i campi Autore della richiesta per e Richiesta avviata da hanno link denominati anziché Mostra.

Problemi di Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

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

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

Prima e dopo l'aggiunta di un'impostazione di campionamento di JS con consenso esplicito.

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

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

La traccia è disponibile in menu Strumenti > Visualizza traccia senza limitazioni dopo la generazione del report Lighthouse.

Per scoprire 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 > Snapshot heap

Gli snapshot 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.

Il prima e il dopo che mostrano una descrizione comando descrittiva per gruppi speciali di oggetti.

Problema di Chromium: 41490331.

Applicazione > Aggiornamenti dello spazio di archiviazione

Questa versione introduce un paio di aggiornamenti in Applicazione > Spazio di archiviazione.

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.

Il prima e il dopo che mostrano quanti byte vengono utilizzati per lo spazio di archiviazione condiviso.

Lo spazio di archiviazione condiviso ti consente di avere accesso in scrittura illimitato e cross-site con accesso in lettura che tutela la 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.

In linea con questa tendenza, DevTools ha rimosso la sezione Web SQL dal riquadro Applicazione.

Problema di Chromium: 327254049.

Miglioramenti del riquadro Copertura

Questa versione introduce un paio di aggiornamenti al pannello Copertura:

  • La barra di stato ora calcola correttamente le statistiche di utilizzo per gli URL filtrati. In precedenza, anziché sommare i dati di utilizzo dei componenti secondari che corrispondevano al filtro, venivano sommati i dati del componente principale.

Il prima e il dopo il calcolo corretto delle statistiche sui bambini corrispondenti.

  • Il colore del codice utilizzato ora è grigio anziché verde per migliorare la visibilità, soprattutto per le persone con daltonismo che non percepiscono il colore verde.

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 nel riquadro viene visualizzato un banner di avviso nella parte superiore.

Il banner di avviso che annuncia il 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 definitiva di ritirare il riquadro.

Ritiro del Profiler di JavaScript: fase 4, finale

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

Per profilare le prestazioni della CPU, utilizza il pannello Prestazioni.

Problema di Chromium: 40262073.

Punti salienti vari

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

  • Rete:
    • È stato corretto un bug relativo all'analisi errata dei cookie su più righe (325410304).
    • È stata corretta l'anteprima dello stack di chiamate nella colonna Iniziatore (327665602).
  • Monitoraggio delle prestazioni: le caselle di controllo sono ora uguali a quelle del resto dell'interfaccia utente (1467464).
  • Fonti: è stata aggiunta l'evidenziazione della sintassi per i documenti XHTML (327940244).
  • Impostazioni > Dispositivi: il vecchio Galaxy Fold viene sostituito dal nuovo Galaxy Z Fold5 (40113439).
  • Rendimento: tutti i risultati di ricerca corrispondenti ora vengono evidenziati quando si esegue la ricerca con Ctrl/Cmd+F (1523279).
  • Risorse per sviluppatori: ora mostra anche le risorse caricate tramite le estensioni di linguaggio, come l'estensione Chrome C/C++ DevTools Support (DWARF) (40746829).
  • Rendimento: è stato corretto lo stack di chiamate ritagliato e il relativo layout errato nella scheda Riepilogo (325314708).
  • Riquadro: i pulsanti Chiudi sono ora selezionabili, quindi i riquadri possono essere chiusi utilizzando la tastiera.

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.