Novità di DevTools (Chrome 123)

Sofia Emelianova
Sofia Emelianova
GitHub

Trova l'easter egg

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

Per trovarla, cerca un'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 contiene l'opzione Emulare una pagina attivata sotto il pulsante Attiva/disattiva stato elementi (:hov). In precedenza, questa opzione era disponibile solo nel riquadro Rendering.

Se trasferisci lo stato attivo dalla pagina a DevTools, alcuni elementi in overlay vengono nascosti automaticamente se vengono attivati dallo stato 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 come se fosse attivo.

L'immagine prima e dopo l'emulazione di una pagina attiva nella scheda Stili.

Problema di Chromium: 1468393.

Selettore colori, Orologio angolare e Editor di animazioni nei valori di riserva var()

Per semplificare la modifica del codice CSS, la scheda Elementi > Stili ora ti consente di utilizzare Selettore di colori, Angolo orologio e Editor di animazioni nei valori di riserva var().

Gli strumenti Color Picker, Angolo orologio ed Editor di animazioni prima e dopo il rendering nei valori di riserva var().

Problema di Chromium: 1520417.

Lo strumento Lunghezza CSS è deprecato

Lo strumento di creazione della lunghezza CSS è stato ritirato a causa di feedback che indicano che rallenta il flusso di lavoro e non aggiunge molto valore.

Non puoi più trascinare per modificare 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 Lunghezza, deseleziona Settings > Experiments > Deprecate CSS <length> authoring tool in the Styles tab.

Se vuoi comunque utilizzare questo strumento, il team di DevTools vorrebbe conoscere la tua opinione e 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 di ritiro è disattivato.

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

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

L&#39;immagine prima e dopo la visualizzazione di un popup sul risultato di ricerca selezionato.

Problema di Chromium: 1523279.

Aggiornamenti del riquadro Rete

Questa versione introduce un paio di aggiornamenti al riquadro Rete.

Pulsante Cancella e filtro di ricerca nella scheda Rete > EventStream

La scheda Rete > EventStream riceve:

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

L&#39;immagine prima e dopo l&#39;aggiunta di un pulsante Cancella e di un filtro di ricerca.

Il team di DevTools vuole ringraziare Charles Vazac per aver implementato questa funzionalità.

Inoltre, la scheda EventStream ora acquisisce anche gli eventi inviati dai server tramite fetch/XHR, non solo l'API EventSource. Prova 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 dell'esenzione accanto ai cookie che altrimenti avrebbero dovuto essere bloccati dalla graduale eliminazione dei cookie di terze parti.

Le immagini prima e dopo 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 Origini

Nella sezione Origini > Punti di interruzione vengono ripristinate le opzioni Attiva e Disattiva tutti i punti di interruzione nel menu a discesa. In precedenza, queste opzioni non erano incluse nel nuovo design delle interruzioni.

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.

Le immagini 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 nella struttura ad albero di navigazione in Origini > 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 pannello 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 delle variazioni del layout. Questo controllo sostituisce il controllo degli elementi con variazioni del layout che elencava solo gli elementi interessati dalle variazioni del layout.

Un nuovo controllo che stima le cause principali dei cambiamenti di layout.

Per conoscere 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à:

  • Ora gli screen reader 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 un comando rapido in Impostazioni > Comandi rapidi.
  • La tabella in Impostazioni > Località ora viene visualizzata correttamente come tabella per gli strumenti di accessibilità.

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

Altri punti salienti

Di seguito sono riportate alcune correzioni e miglioramenti significativi di questa release:

  • I caratteri in DevTools vengono aggiornati in modo da corrispondere a quelli di Chrome (1523538).
  • Rendimento: è stato corretto il problema di visualizzazione dello screenshot quando si passa il mouse sopra la sequenza temporale (1519469).
  • Origini: l'altezza della riga nell'editor è aumentata per migliorare la leggibilità del codice (1523640).
  • Rete > Risposte: sono stati corretti vari problemi di visualizzazione con formati e codifiche diversi (1523128, 1509336, 1523128, 41481944, 1509336).

Scaricare i canali di anteprima

Valuta la possibilità di utilizzare Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

Novità di DevTools

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