Novità di DevTools, Chrome 124

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

  1. In Compilazione automatica profilo, fai clic su uno dei pulsanti Compila modulo ..., fai clic su Invia e poi, 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 dei moduli rilevati, i campi dedotti dalla compilazione automatica e i valori salvati.

Il riquadro Compilazione automatica.

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

Limitazione migliorata della rete per WebRTC

Con la nuova aggiunta dei 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 la necessità di utilizzare software di terze parti.

I nuovi parametri sono: Packet Loss (percent), Packet Queue Length (numero di pacchetti) e il flag check_box Packet Riordinamento.

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 selezionali nel riquadro Rete.

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

Problema relativo a Chromium: 41175925.

Supporto delle animazioni tramite scorrimento nel riquadro Animazioni

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

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

Un gruppo di animazioni a scorrimento contrassegnate dall'icona di un mouse.

In Panoramica viene visualizzato un gruppo di animazioni contrassegnato dall'icona del mouse con il mouse. Ora puoi esaminarlo. Il gruppo mostra valori in pixel invece 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 le cose meno dettagliate e più strutturate.

Le operazioni prima e dopo l'aggiunta del rientro e l'inclusione degli stili nidificati tra parentesi graffe.

Problema relativo a Chromium: 40166888.

Riquadro Prestazioni avanzate

Questa versione introduce diversi miglioramenti al riquadro Rendimento,

Nascondi le funzioni e i relativi elementi secondari 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.

Prima e dopo l'aggiunta di un menu contestuale che ti consente di nascondere le funzioni e i relativi elementi secondari.

Le funzioni con elementi secondari nascosti hanno un pulsante del menu a discesa arrow_drop_down sulla destra. Passaci il mouse sopra per visualizzare il numero di bambini 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 dagli iniziatori selezionati agli eventi avviati

In precedenza, quando selezionavi un evento nella traccia Principale, la traccia mostrava una freccia da iniziatore all'evento selezionato. Ora il percorso mostra anche una freccia dall'evento selezionato a quello avviato, se presente.

Le frecce prima e dopo che mostrano le frecce dagli eventi selezionati a quelli iniziati e i link denominati invece di Mostra.

Inoltre, tutti gli iniziatori ora dispongono dei campi Iniziatore per nella scheda Riepilogo e entrambi i campi Iniziatore per e Iniziato da hanno link denominati invece di Rivelazione.

Problemi relativi a Chromium: 325604258, 325024819, 326055289.

Lighthouse 11.6.0

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 11.6.0. Consulta l'elenco completo delle modifiche.

Una delle modifiche più importanti è la nuova impostazione di attivazione check_box_outline_blank che consente di abilitare il campionamento di JS. Questa opzione è disattivata per impostazione predefinita.

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

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

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

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

Per apprendere le nozioni di base sull'utilizzo del riquadro Lighthouse in DevTools, consulta Lighthouse: ottimizzare la velocità del sito web.

Problema relativo a Chromium: 772558.

Descrizioni comando per le categorie speciali in Memoria > Snapshot heap

Gli snapshot heap nel riquadro Memoria contengono gruppi speciali di oggetti che non sono basati su 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 dopo che mostra una descrizione comando descrittiva per gruppi speciali di oggetti.

Problema relativo a Chromium: 41490331.

Applicazione > Aggiornamenti dello spazio di archiviazione

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

Byte utilizzati per l'archiviazione condivisa

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

I dati prima e 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 allo spazio di archiviazione tra siti con un accesso in lettura che tutela la privacy.

Problema relativo a Chromium: 324464353.

SQL web completamente deprecato

Chrome ha ritirato il codice SQL web nella versione 119 e ha rimosso il token di prova relativo al ritiro in questa versione, quindi non puoi più utilizzare SQL web.

In seguito all'esempio, DevTools ha rimosso la sezione SQL web dal riquadro Applicazione.

Problema relativo a Chromium: 327254049.

Miglioramenti al riquadro Copertura

In questa versione vengono introdotti un paio di aggiornamenti al 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 dei publisher secondari che corrispondevano al filtro, venivano aggiunti i dati dei publisher principali.

Prima e dopo il calcolo corretto delle statistiche secondarie corrispondenti.

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

Prima e dopo la modifica del colore del codice utilizzato in grigio.

Problema relativo a Chromium: 41494198, 329253687.

Il riquadro Livelli potrebbe essere obsoleto

Il riquadro Livelli potrebbe essere ritirato a breve a causa di uno scarso utilizzo. Il riquadro ora mostra un banner di avviso nella parte superiore.

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

Non esitare a condividere le tue opinioni e i tuoi dubbi prima che il team decida di ritirare il panel.

Ritiro di JavaScript Profiler: fase quattro, finale

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

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

Problema relativo a Chromium: 40262073.

Varie in evidenza

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

  • Rete:
    • È stato corretto un bug con l'analisi errata dei cookie su più righe (325410304).
    • Anteprima dello stack di chiamate corretta nella colonna Iniziatore (327665602).
  • Performance Monitoring: le caselle di controllo Traccia ora sono le stesse del resto della UI (1467464).
  • Origini: è stata aggiunta l'evidenziazione della sintassi per i documenti HTML (327940244).
  • Impostazioni > Dispositivi: il vecchio Galaxy Fold è stato sostituito con il più recente Galaxy Z Fold 5 (40113439).
  • Rendimento: tutti i risultati di ricerca corrispondenti ora vengono evidenziati quando si cerca con Ctrl/Cmd+F (1523279).
  • Risorse per sviluppatori: ora sono mostrate anche le risorse caricate tramite estensioni di linguaggio, ad esempio l'estensione di Chrome per il supporto di DevTools C/C++ (DWARF) (40746829).
  • Rendimento: corretto lo stack di chiamate ritagliato e il relativo layout errato nella scheda Riepilogo (325314708).
  • Riquadro a scomparsa: chiudi i pulsanti Chiudi sono ora attivabili, in modo che i riquadri possano 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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

  • Inviaci un suggerimento o un feedback tramite crbug.com.
  • Segnala un problema di DevTools usando Altre opzioni   Altre   > Guida > Segnala un problema di DevTools in DevTools.
  • Invia un tweet all'indirizzo @ChromeDevTools.
  • Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutto ciò che è stato trattato nella serie Novità di DevTools.

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

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 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 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 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59