Novità di DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Trova l'uovo di Pasqua

Per festeggiare il pesce d'aprile di quest'anno Day, il team DevTools ha nascosto un uovo di Pasqua da qualche parte in DevTools.

Per trovarla, cerca un'emoji colorata 💫.

Aggiornamenti del riquadro degli elementi

Questa versione introduce diversi aggiornamenti al riquadro Elementi.

Emula una pagina con lo stato attivo in Elementi > Stili

Elementi > Nella scheda Stili ora è presente l'opzione check_box Emula una pagina con lo stato attivo sotto il pulsante Attiva/disattiva stato elementi (:hov). In precedenza, questa opzione era disponibile solo nel riquadro Rendering.

Se imposti lo stato attivo dalla pagina a DevTools, alcuni elementi di overlay vengono nascosti automaticamente se attivati dall'elemento attivo. Ad esempio, elenchi a discesa, menu o selettori di date. L'opzione Emula una pagina con lo stato attivo ti consente di eseguire il debug di un elemento di questo tipo come se fosse attivo.

I dati prima e dopo l'emulazione di una pagina con lo stato attivo nella scheda Stili.

Problema relativo a Chromium: 1468393.

Selettore colori, orologio ad angolo ed editor di Easing nei fallback di var()

Per semplificare la modifica CSS, vai alla scheda Elementi > Nella scheda Stili ora puoi utilizzare il selettore colori, l'Orologio angolare ed l'Editor easing nei fallback var().

Gli strumenti prima e dopo il rendering Selettore colori, Orologio angolare ed Editor Easing nei fallback var().

Problema relativo a Chromium: 1520417.

Lo strumento lunghezza CSS è deprecato

Lo strumento di creazione della lunghezza CSS è deprecato a causa dei feedback che dimostrano che rallenta il flusso di lavoro e non aggiunge molto valore.

Non puoi più trascinare per regolare il valore o selezionare un tipo di unità dal menu a discesa. Invece, fai doppio clic sul valore e digitane uno nuovo.

Per riattivare lo strumento Lunghezza, cancella le impostazioni Impostazioni > Esperimenti > check_box Depreca CSS <length> strumento di authoring nella scheda Stili.

Se vuoi comunque utilizzare questo strumento, il team DevTools vorrebbe sapere la tua opinione e capire in che modo lo strumento Lunghezza ti aiuta nel tuo flusso di lavoro. Non esitare a lasciare un feedback in crbug/1522657.

L&#39;esperimento sul ritiro è disattivato.

Popover per il risultato di ricerca selezionato in Rendimento > Traccia principale

Per semplificare la ricerca, il grafico a fiamme in Rendimento > La traccia Principale ora mostra un popover sopra l'evento corrispondente quando scorri i risultati di ricerca.

Il prima e dopo la visualizzazione di un popover sul risultato di ricerca selezionato.

Problema relativo a Chromium: 1523279.

Aggiornamenti del pannello Rete

Questa versione introduce un paio di aggiornamenti al riquadro Rete.

Pulsante Cancella e filtro di ricerca nella Rete > Scheda EventStream

La Rete > La scheda EventStream ottiene:

  • Un pulsante di blocco Cancella che cancella gli eventi acquisiti nella tabella.
  • Un filtro di ricerca che comprende le espressioni regolari.

Prima e dopo l&#39;aggiunta di un pulsante Cancella e di un filtro di ricerca.

Il team DevTools vorrebbe ringraziare Charles Vazac per aver ottenuto questa funzionalità.

Inoltre, la scheda EventStream ora acquisisce anche gli eventi che i server inviano tramite fetch/XHR, non solo l'API EventSource. Prova questa funzionalità su questa pagina dimostrativa.

Problema relativo a Chromium: 1488863, 40659493.

Descrizioni comando con motivi di esenzione per i cookie di terze parti in Rete > Cookie

La Rete > La scheda Cookie ora mostra le descrizioni comando con motivi di esenzione accanto ai cookie che altrimenti avrebbero dovuto essere bloccati dalla eliminazione graduale dei cookie di terze parti.

Il prima e dopo che mostra una descrizione comando con un motivo di esenzione per un cookie di terze parti.

I cookie di terze parti potrebbero essere consentiti per i seguenti motivi:

Problema relativo a Chromium: 41491846.

Abilita e disabilita tutti i punti di interruzione in Origini

Nella sezione Fonti > Nella sezione Punti di interruzione vengono riportate le opzioni Attiva e Disattiva tutti i punti di interruzione nel menu a discesa. In precedenza, queste opzioni erano escluse dalla riprogettazione dei punti di interruzione.

Per attivare o disattivare tutti i punti di interruzione, fai clic con il tasto destro del mouse su un punto di interruzione in Origini > Punti di interruzione e seleziona l'opzione corrispondente.

Prima e dopo che hanno ripristinato le opzioni di abilitazione e disabilitazione.

Problema relativo a Chromium: 1522037.

Visualizza gli script caricati in DevTools per Node.js

DevTools per Node.js ora mostra gli script caricati nell'albero di navigazione in Origini > Script.

Il prima e dopo l&#39;aggiunta della scheda Script con una struttura di script caricati.

Problema relativo a Chromium: 1518364.

Lighthouse 11.5.0

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

Tra le modifiche più importanti c'è un nuovo controllo che stima le cause principali delle variazioni del layout. Questo controllo sostituisce il controllo degli elementi layout-shift che elencava solo gli elementi interessati dalle variazioni del layout.

Un nuovo controllo che stima le cause principali delle variazioni del layout.

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.

Accessibilità

Questa versione presenta i seguenti miglioramenti all'accessibilità:

  • Gli screen reader annunciano ora:
    • Il testo del link Scopri di più accanto ai tipi di selettori nel riquadro Registratore.
    • Quando nessun esperimento corrisponde al filtro nelle impostazioni Impostazioni > Esperimenti.
    • La conferma dell'azione in caso di rimozione, conferma o ripristino di una scorciatoia in Impostazioni Impostazioni > Scorciatoie.
  • La tabella in impostazioni Impostazioni > Ora la sezione Località viene visualizzata correttamente come tabella per gli strumenti di accessibilità.

Problemi relativi a Chromium: 1516957, 324282443, 324467508, 324930007.

Varie in evidenza

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

  • I caratteri in DevTools vengono aggiornati in modo che corrispondano a Chrome (1523538).
  • Rendimento: è stata corretta la visualizzazione degli screenshot al passaggio del mouse sopra la sequenza temporale (1519469).
  • Origini: l'altezza della riga nell'Editor è stata aumentata per migliorare la leggibilità del codice (1523640).
  • Rete > Risposte: sono stati risolti vari problemi di visualizzazione con formati e codifiche differenti (1523128, 1509336, 1523128, 41481944, 1509336).

Scaricare 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à più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e 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 utilizzando Altre opzioni   Altro > 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.