Novità di DevTools (Chrome 118)

Sofia Emelianova
Sofia Emelianova

Nuova sezione per le proprietà personalizzate in Elementi > Stili

Il riquadro Elementi ora supporta la regola at-rule CSS@property. Ti consente di definire esplicitamente le proprietà CSS personalizzate e di registrarle in un foglio di stile senza eseguire JavaScript.

Per ispezionare le proprietà personalizzate registrate, in Elementi > Stili, passa il mouse sopra il nome della proprietà per visualizzarne i descrittori in una descrizione comando. Nella descrizione comando, fai clic sul link per visualizzare la proprietà registrata nella sezione comprimibile @property.

Problemi di Chromium: 1471102, 1471103, 1471105.

Ulteriori miglioramenti alle sostituzioni locali

Nel solco del flusso di miglioramenti della versione precedente, le sostituzione locali ora consentono di:

  • In Origini > Pagina, quando fai clic con il tasto destro del mouse su un file mappato alla sorgente e selezioni Sostituisci contenuti, DevTools mostra una finestra di dialogo che ti reindirizza all'origine originale. I contenuti dei file mappati di origine non possono essere sostituiti.

    La finestra di dialogo che ti indirizza al codice originale anziché al file mappato in base all'origine.

  • Il riquadro Rete include una nuova colonna Contiene sostituzioni e un filtro has-overrides:[content|headers|yes|no] corrispondente. Per visualizzare la colonna Presenta sostituzioni, fai clic con il tasto destro del mouse sull'intestazione della tabella e selezionala.

    Filtro per il valore "has-overrides:yes" nella colonna "Ha sostituzioni".

  • In Origini > Sostituzioni, l'opzione di menu Elimina tutte le sostituzioni è stata sostituita dall'opzione Elimina con un comportamento preciso.

    Prima e dopo la sostituzione di "Elimina tutte le sostituzioni" con "Elimina".

L'opzione precedente Elimina tutte le sostituzioni era fuorviante perché eliminava solo le sostituzioni attive nella sessione corrente, contrassegnate dall'icona a forma di punto viola Salvato..

La nuova opzione Elimina mostra prima un messaggio di avviso e richiede una conferma, poi elimina la cartella su cui hai fatto clic con tutti i relativi contenuti.

Per ripristinare l'opzione precedente, seleziona Casella di controllo. Attiva "Elimina temporaneamente tutte le sostituzioni" in Impostazioni. Impostazioni > Sperimentali.

Problemi di Chromium: 1472952, 1416338, 1472580, 1473681 1475668.

I risultati della ricerca ora mostrano una voce per tutte le corrispondenze trovate in una riga di codice. In precedenza, veniva visualizzata solo la prima corrispondenza per riga di codice. Il nuovo comportamento è particolarmente utile quando esegui ricerche nei file minimizzati. Quando fai clic su un risultato di ricerca, il file si apre nell'editor e ora la corrispondenza viene visualizzata non solo verticalmente, ma anche orizzontalmente.

Le immagini prima e dopo la ricerca mostrano tutte le corrispondenze per riga.

Inoltre, la Ricerca è stata velocizzata. Guarda il confronto prima (a sinistra) e dopo (a destra) nel video successivo.

Infine, la Ricerca ora supporta l'ignoramento della scheda e non mostra i risultati dei file ignorati.

Problemi di Chromium: 1468875, 1472019.

Riquadro Origini migliorato

Area di lavoro semplificata nel riquadro Origini

La funzionalità Spazio di lavoro nel riquadro Origini è stata semplificata:

  • Nomi coerenti. In particolare, il riquadro Origini > Filesystem è stato rinominato in Spazio di lavoro. Diversi testi dell'interfaccia utente in questo riquadro ora sono più chiari e privi di ridondanze.
  • Configurazione migliorata. Visualizza indicatori migliori per trascinare le cartelle o fai clic su un link per selezionarne una.

Origini > Spazio di lavoro ti consente di sincronizzare le modifiche apportate in DevTools direttamente con i file di origine.

Guarda la nuova configurazione e il nuovo flusso di lavoro in azione:

Problemi di Chromium: 1473771, 1473880, 1473963, 1474686, 1474687.

Riordinare i riquadri in Origini

Ora puoi riordinare i riquadri sul lato sinistro del riquadro Origini trascinandoci sopra gli elementi, in modo simile a come puoi riordinare altri riquadri, schede e riquadri.

Problemi di Chromium: 1473758.

Evidenziazione della sintassi e stampa in formato gradevole per più tipi di script

Ora il riquadro Origini può:

  • Stampa in formato leggibile JavaScript in linea nei seguenti tipi di script: module, importmap, speculationrules.
  • Evidenzia la sintassi dei tipi di script importmap e speculationrules, che contengono entrambi JSON.

Prima e dopo la formattazione e l'evidenziazione della sintassi del tipo di script delle regole di speculazione.

Per ulteriori informazioni sulle regole di speculazione, consulta Prerender le pagine in Chrome per navigazioni istantanee.

Problema di Chromium: 1473875.

Emula la funzionalità dei contenuti multimediali prefers-reduced-transparency

Chrome 118 ora supporta la funzionalità multimediale prefers-reduced-transparency. Questa funzionalità consente agli sviluppatori di adattare i contenuti web alle preferenze selezionate dall'utente per una trasparenza ridotta nel sistema operativo, ad esempio l'impostazione Riduci trasparenza su macOS.

Per emulare questa funzionalità multimediale, apri la scheda Rendering e scorri verso il basso fino a visualizzarla.

Problema di Chromium: 1424879.

Lighthouse 11

Il pannello Lighthouse ora esegue Lighthouse 11. In particolare, questa versione rimuove la navigazione precedente, aggiunge nuovi controlli di accessibilità e modifica il modo in cui viene assegnato il punteggio alla categoria di accessibilità.

Consulta anche l'elenco completo delle modifiche. 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.

Miglioramenti all'accessibilità

DevTools ora supporta più tasti di navigazione:

  • Panoramica CSS: utilizza le frecce su e giù per spostarti tra le sezioni della barra laterale sinistra.
  • Memoria: nella barra laterale sinistra, seleziona il pulsante Salva accanto agli istantanee con Tab e premi Invio per selezionare la cartella.

Inoltre, sono stati corretti diversi problemi relativi agli annunci per gli screen reader.

Problemi di Chromium: 1470401, 1471301, 1474108, 1468631.

Altri punti salienti

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

  • Rete: nuove icone per i tipi di risorse più utilizzati: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
  • Aggiornamenti dei colori ai colori Material 3 in molti elementi dell'interfaccia utente, in particolare nei riquadri Elementi e Rendimento (1456690, 1472243).
  • La pagina Problemi ora conserva i problemi relativi ai cookie tra le navigazioni (1466601).
  • Vari miglioramenti a Applicazione > Precaricamento, in particolare griglie ordinabili e dettagli dei set di regole rivisti (1410709).
  • Vari miglioramenti all'editor dei comandi in Protocol Monitor, in particolare avvisi su input errati, modifica di un comando inviato, editor per i parametri degli oggetti senza chiavi predefinite, supporto di enum non definiti dai riferimenti, oggetti senza riferimento al tipo, filtri dei comandi in base alle corrispondenze delle sottostringhe e altro ancora (1448050).
  • Il grafico a forma di fiamma del rendimento viene delimitato dalla casella del totale nel grafico a torta (1470147).
  • Origini ora non tratta i trattini come caratteri di parola in CSS (1471354).
  • Ora il completamento automatico ordina sempre le parole chiave in base al CSS alla fine.
  • I filtri RegEx ora supportano gli spazi (1346936).
  • Elements ha corretto il rilevamento delle funzionalità di query sui contenuti multimediali (1472693).

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.