Novità di DevTools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

Nuovo riquadro di compilazione automatica

Questa versione imposta il nuovo riquadro Compilazione automatica in DevTools. La compilazione automatica di Chrome consente di compilare in modo pratico i moduli automaticamente sui siti web con indirizzi salvati. Il nuovo riquadro Compilazione automatica ti consente di esaminare la mappatura tra i campi dei moduli, i valori previsti di compilazione automatica e i dati salvati.

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

  1. In Compilazione automatica del profilo, fai clic su uno dei pulsanti Compila modulo... e poi su Invia. Nella finestra di dialogo Vuoi 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.

Riquadro Compilazione automatica.

Per scoprire di più, vedi Imparare a usare Moduli e Compilazione automatica.

Limitazione della rete avanzata per WebRTC

Con la nuova aggiunta di parametri relativi ai pacchetti ai profili di limitazione di rete personalizzati, ora puoi limitare le tue 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 pacchetti (percentuale), lunghezza della coda dei pacchetti (numero di pacchetti) e il flag check_box riordinamento 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 Impostazioni > Limitazione e seleziona la connessione nel riquadro Rete.

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

Problema di Chromium: 41175925.

Supporto delle animazioni con scorrimento nel riquadro Animazioni

Il riquadro Animazioni ora consente di esaminare le animazioni con scorrimento.

Prova questa funzionalità in questa pagina demo. Apri il riquadro Animazioni e ricarica la pagina per acquisire animazioni con scorrimento.

Un gruppo di animazioni con scorrimento contrassegnato da un'icona del mouse.

Un gruppo di animazioni contrassegnato con l'icona di un mouse del mouse viene visualizzato nella Panoramica. Ora puoi ispezionarla. Il gruppo mostra i valori dei pixel anziché dei millisecondi nella Sequenza temporale.

Supporto della nidificazione CSS migliorato in Elementi > Stili

La scheda Elementi > Stili migliora il supporto della nidificazione dei CSS e ora mostra gli stili nidificati con rientro e parentesi graffe. La nidificazione CSS è un modo per raggruppare le regole CSS e rendere i contenuti meno dettagliati e più strutturati.

Il prima e dopo l'aggiunta del rientro e che includono gli stili nidificati tra parentesi graffe.

Problema di Chromium: 40166888.

Riquadro Rendimento migliorato

Questa versione introduce diversi miglioramenti al riquadro Prestazioni.

Nascondi le funzioni e i relativi figli nel grafico a fiamme

Per filtrare il rumore dal grafico a fiamme in Prestazioni > Principale, ora puoi nascondere le funzioni non pertinenti 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.

Il prima e il dopo l'aggiunta di un menu contestuale che consente di nascondere le funzioni e i relativi elementi secondari.

Per le funzioni con elementi secondari nascosti è presente un pulsante arrow_drop_down Elenco a discesa a destra. Passa il mouse sopra al file per vedere il numero di elementi secondari nascosti e fai clic per visualizzarli di nuovo. Per tornare allo stato iniziale del grafico a fiamme, fai clic con il tasto destro del mouse su una funzione e seleziona Reimposta traccia.

Frecce che passano dagli iniziatori selezionati agli eventi che hanno avviato

In precedenza, quando selezionavi un evento nella traccia Principale, la traccia mostrava una freccia che inseriva l'evento selezionato. Ora la traccia mostra anche una freccia dall'evento selezionato all'evento che è stato avviato, se presente.

Il prima e il dopo che mostrano frecce da eventi selezionati a eventi avviati e link denominati al posto di Mostra.

Inoltre, tutti gli iniziatori ora hanno i campi Iniziatore per nella scheda Riepilogo e i campi Iniziatore per e Avviato da hanno link denominati anziché Rivelazione.

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 degne di nota c'è la nuova impostazione di attivazione check_box_outline_blank Abilita campionamento JS. Questa impostazione è disattivata per impostazione predefinita.

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

L'attivazione del campionamento JS aggiunge stack di chiamate JavaScript dettagliati all'analisi delle prestazioni, ma può rallentare la generazione dei report.

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

La traccia è disponibile nel menu Strumenti more_vert > Visualizza traccia non limitata dopo aver generato il report Lighthouse.

Per apprendere 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 heap nel riquadro Memoria contengono gruppi speciali di oggetti non basati sui costruttori. Quando passi il mouse sopra questi oggetti, il riquadro Memoria mostra ora 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 ad Applicazione > Spazio di archiviazione.

Byte utilizzati per l'archiviazione condivisa

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

Il prima e il dopo che mostrano il numero di byte utilizzati per l'archiviazione condivisa.

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

Problema di Chromium: 324464353.

SQL web completamente deprecato

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

Come conseguenza, DevTools ha rimosso la sezione SQL web dal riquadro Applicazione.

Problema di Chromium: 327254049.

Miglioramenti al riquadro di copertura

Questa versione introduce un paio di aggiornamenti nel riquadro Copertura:

  • La barra di stato ora calcola correttamente le statistiche sull'utilizzo per gli URL filtrati. In precedenza, invece di sommare i dati sull'utilizzo degli URL secondari che corrispondevano al filtro, venivano aggiunti i dati dell'elemento principale.

Prima e dopo il calcolo corretto delle statistiche figlio corrispondenti.

  • Il colore del codice utilizzato è ora grigio anziché verde per migliorare la visibilità, in particolare in caso di assenza di visione dei colori verde.

Il 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 dello scarso utilizzo. Il riquadro ora mostra un banner di avviso in alto.

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 finale di ritirare il panel.

Ritiro di JavaScript Profiler: 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 riquadro Prestazioni.

Problema di Chromium: 40262073.

Varie in evidenza

Di seguito sono riportate alcune correzioni e miglioramenti degni di nota di 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 Traccia ora sono le stesse del resto dell'interfaccia utente (1467464).
  • Fonti: è stata aggiunta l'evidenziazione della sintassi per i documenti HTML (327940244).
  • Impostazioni > Dispositivi: il vecchio Galaxy Fold viene sostituito con il più recente Galaxy Z Fold 5 (40113439).
  • Rendimento: tutti i risultati di ricerca con corrispondenza 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 lingua, ad esempio l'estensione di Chrome C/C++ DevTools Support (DWARF) (40746829).
  • Rendimento: è stato corretto lo stack di chiamate ritagliato e il relativo layout non valido nella scheda Riepilogo (325314708).
  • Riquadro a scomparsa: ora i pulsanti Chiudi chiudi sono attivabili, quindi puoi chiudere i riquadri usando la tastiera.

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema DevTools utilizzando Altre opzioni   Altre   > Guida > Segnala i problemi di DevTools in DevTools.
  • Tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.

Chrome 124

Chrome 123

Chrome 122

Guida introduttiva di Chrome

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Versione 115 di Chrome

Chrome 114

Chrome 113

Chrome 112

Guida introduttiva di Chrome

Versione 110 di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Guida introduttiva di Chrome

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome versione 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome versione 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome versione 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59