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 in modo esplicito le proprietà personalizzate CSS e di registrarle in un foglio di stile senza eseguire JavaScript.

Per esaminare 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 agli override locali

Continuando il flusso di miglioramenti della versione precedente, gli override locali ora:

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

  

• Il riquadro Rete presenta una nuova colonna Ha override e un filtro has-overrides:[content|headers|yes|no] corrispondente. Per visualizzare la colonna Ha override, 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.

  

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

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

Per ripristinare l'opzione precedente, seleziona Attiva "Elimina temporaneamente tutti gli override" in Impostazioni > Esperimenti.

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, mostrava solo la prima corrispondenza per riga di codice. Il nuovo comportamento è particolarmente utile quando esegui ricerche nei file minificati. 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'ignorare l'elenco e non mostra i risultati dei file ignorati.

Problemi di Chromium: 1468875, 1472019.

Miglioramento del riquadro Origini

Area di lavoro semplificata nel riquadro Origini

La funzionalità workspace nel riquadro Fonti è stata semplificata:

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

Origini > Workspace ti consente di sincronizzare le modifiche apportate in DevTools direttamente ai file di origine.

Guarda la nuova configurazione e il nuovo workflow 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 Fonti trascinandoli, in modo simile a come puoi riordinare altri riquadri, schede e pannelli.

Problemi di Chromium: 1473758.

Evidenziazione della sintassi e formattazione per più tipi di script

Il riquadro Origini ora può:

• Stampa in modo leggibile il codice JavaScript incorporato nei seguenti tipi di script: module, importmap, speculationrules.
• Evidenzia la sintassi dei tipi di script importmap e speculationrules, entrambi contenenti JSON.

Per ulteriori informazioni sulle regole di speculazione, vedi Eseguire il prerendering delle pagine in Chrome per una navigazione istantanea.

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 alla preferenza selezionata dall'utente per la 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 riquadro Lighthouse ora esegue Lighthouse 11. In particolare, questa versione rimuove la navigazione legacy, 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 scoprire 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ù sequenze di tasti di navigazione:

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

Inoltre, sono stati risolti diversi problemi di annuncio dello screen reader.

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

Punti salienti vari

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

• Rete: nuove icone per i tipi di risorse più comuni: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
• Aggiornamenti dei colori ai colori Material 3 in molti elementi UI, in particolare nei pannelli Elementi e Rendimento (1456690, 1472243).
• La sezione Problemi ora conserva i problemi relativi ai cookie durante la navigazione (1466601).
• Vari miglioramenti di Applicazione > Precaricamento, in particolare griglie ordinabili e dettagli rivisti del set di regole (1410709).
• Vari miglioramenti dell'editor di comandi in Monitor protocolli, in particolare avvisi su input errati, modifica di un comando inviato, editor per parametri oggetto senza chiavi predefinite, supporto di enumerazioni non definite da riferimenti, oggetti senza riferimento al tipo, filtri dei comandi per corrispondenze di sottostringhe e altro ancora (1448050).
• Il grafico a fiamma Rendimento ha un bordo intorno alla casella del totale nel grafico a torta (1470147).
• Fonti ora non considera i trattini come caratteri di parole nel CSS (1471354).
• Il completamento automatico ora ordina sempre le parole chiave in base al CSS alla fine.
• I filtri RegEx ora supportano gli spazi (1346936).
• Elementi: rilevamento delle funzionalità di query dei media fisse (1472693).

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.

• 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 a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.