Novità di DevTools (Chrome 118)

Nuova sezione per le proprietà personalizzate in Elementi > Stili

Il riquadro Elementi ora supporta la regola at-rule CSS@property. Consente di definire le proprietà personalizzate CSS in modo esplicito e di registrarle in un foglio di stile senza eseguire alcun codice JavaScript.

Per controllare le proprietà personalizzate registrate, in Elementi > Stili, passa il mouse sopra il nome della proprietà e visualizza i relativi 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.

Altri miglioramenti delle sostituzioni locali

Nel solco dello stream di miglioramenti della versione precedente, le sostituzione locali ora:

• 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 all'origine non possono essere sostituiti.

  

• Il riquadro Rete include una nuova colonna Presenta 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.

  

• In Origini > Override, l'opzione di menu Elimina tutti gli override è stata sostituita dall'opzione Elimina con un comportamento preciso.

  

La precedente sezione Elimina tutti gli override creava confusione perché eliminava solo gli override attivi nella sessione corrente, contrassegnati dall'icona con il punto viola .

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

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

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

Ricerca avanzata

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 tra 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.

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:

• Denominazione coerente. 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. Scopri suggerimenti migliori per trascinare le cartelle o fai clic su un link per selezionare una cartella.

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 relativi a 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.

Per ulteriori informazioni sulle regole di speculazione, consulta Precaricare le pagine in Chrome per la navigazione istantanea delle pagine.

Problema di Chromium: 1473875.

Emula la funzionalità dei contenuti multimediali preferiti-trasparenza ridotta

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.

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, imposta lo stato attivo sul pulsante Salva accanto agli snapshot 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 degni di nota in 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 Prestazioni (1456690, 1472243).
• La sezione Problemi ora conserva i problemi relativi ai cookie nelle varie 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 da riferimenti, oggetti senza riferimento al tipo, filtri dei comandi in base alle corrispondenze delle sottostringhe e altro ancora (1448050).
• Il grafico a fiamme Rendimento ha un bordo intorno al riquadro del totale nel grafico a torta (1470147).
• Origini ora non tratta i trattini come caratteri di parola in CSS (1471354).
• Il completamento automatico ora ordina sempre le parole chiave per 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 gli utenti.

Contatta il team di Chrome DevTools

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

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'indirizzo @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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