Novità di DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova

Trovare l'easter egg

Per celebrare il pesce d'aprile di quest'anno, il team di DevTools ha nascosto un Easter egg da qualche parte in DevTools.

Per trovarlo, cerca l'emoji colorata 💫.

Aggiornamenti del riquadro Elementi

Questa versione introduce diversi aggiornamenti al riquadro Elementi.

Emulare una pagina con lo stato attivo in Elementi > Stili

La scheda Elementi > Stili ora include l'opzione Emula una pagina selezionata sotto il pulsante Attiva/disattiva stato elementi (:hov). In precedenza, questa opzione era disponibile solo nel riquadro Rendering.

Se sposti il focus dalla pagina a DevTools, alcuni elementi di overlay vengono nascosti automaticamente se vengono attivati dal focus. 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 come se fosse attivo.

Il prima e il dopo che emulano una pagina con lo stato attivo nella scheda Stili.

Problema di Chromium: 1468393.

Selettore colori, orologio angolare e editor di interpolazione nei fallback di var()

Per semplificare la modifica del CSS, la scheda Elementi > Stili ora ti consente di utilizzare Selettore di colori, Orologio angolare e Editor di easing nei fallback var().

Le funzionalità di rendering prima e dopo il selettore di colori, l'orologio angolare e l'editor di interpolazione nei fallback var().

Problema di Chromium: 1520417.

Lo strumento per la lunghezza CSS è deprecato

Lo strumento di creazione della lunghezza CSS è ritirato a causa del feedback 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. Fai invece doppio clic sul valore e digitane uno nuovo.

Per riattivare lo strumento di lunghezza, deseleziona Impostazioni > Funzionalità sperimentali > Ritira lo strumento di creazione CSS <length> nella scheda Stili.

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

L&#39;esperimento di ritiro è disattivato.

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

Per semplificare la ricerca, il grafico a fiamma nella traccia Rendimento > Principale ora mostra un popup sopra l'evento corrispondente quando scorri i risultati di ricerca.

Il prima e il dopo che mostrano un popup sul risultato di ricerca selezionato.

Problema di Chromium: 1523279.

Aggiornamenti del riquadro Network

Questa versione introduce un paio di aggiornamenti al pannello Rete.

Pulsante Cancella e filtro di ricerca nella scheda Rete > EventStream

La scheda Rete > EventStream mostra:

  • Un pulsante 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 di DevTools ringrazia Charles Vazac per l'implementazione di questa funzionalità.

Inoltre, la scheda EventStream ora acquisisce anche gli eventi che i server inviano tramite recupero/XHR, non solo l'API EventSource. Provalo in questa pagina demo.

Problema di Chromium: 1488863, 40659493.

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

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

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

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

Problema di Chromium: 41491846.

Attivare e disattivare tutti i punti di interruzione in Sources

La sezione Origini > Punti di interruzione ripristina le opzioni Attiva e Disattiva tutti i punti di interruzione nel menu a discesa. In precedenza, queste opzioni erano state escluse dalla riprogettazione dei breakpoint.

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 il ripristino delle opzioni di attivazione e disattivazione.

Problema di Chromium: 1522037.

Visualizzare gli script caricati in DevTools per Node.js

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

Prima e dopo l&#39;aggiunta della scheda Script con un albero di script caricati.

Problema di Chromium: 1518364.

Lighthouse 11.5.0

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

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

Un nuovo controllo che stima le cause principali degli spostamenti del layout.

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.

Accessibilità

Questa versione include i seguenti miglioramenti dell'accessibilità:

  • Gli screen reader ora annunciano:
    • Il testo del link Scopri di più accanto ai tipi di selettore nel riquadro Registratore.
    • Quando nessun esperimento corrisponde al filtro in Impostazioni > Esperimenti.
    • La conferma dell'azione quando rimuovi, confermi o ripristini una scorciatoia in Impostazioni > Scorciatoie.
  • La tabella in Impostazioni > Posizioni ora viene visualizzata correttamente come tabella per gli strumenti di accessibilità.

Problemi di Chromium: 1516957, 324282443, 324467508, 324930007.

Punti salienti vari

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

  • I caratteri in DevTools vengono aggiornati in modo che corrispondano a Chrome (1523538).
  • Rendimento: è stato corretto il problema di visualizzazione degli screenshot quando si passa il mouse sopra la sequenza temporale (1519469).
  • Fonti: l'altezza della linea nell'editor è aumentata per una migliore leggibilità del codice (1523640).
  • Rete > Risposte: sono stati risolti vari problemi di visualizzazione con formati e codifiche diversi (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 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.