Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 118)

Sofia Emelianova

Nuova sezione per le proprietà personalizzate in Elementi > Stili

Il riquadro Elementi ora supporta l'attributo @property CSS at-rule. Consente di definire in modo esplicito le proprietà CSS personalizzate 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 @property comprimibile.

Problemi di Chromium: 1471102, 1471103, 1471105.

Altri miglioramenti per gli override locali

Proseguendo con il flusso di miglioramenti nella 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 Esegui l'override dei contenuti, DevTools mostrerà una finestra di dialogo che rimanda alla fonte originale. I contenuti dei file mappati all'origine non possono essere sostituiti.
Il riquadro Rete riceve una nuova colonna Con override e un filtro has-overrides:[content|headers|yes|no] corrispondente. Per visualizzare la colonna Con sostituzioni, fai clic con il tasto destro del mouse sull'intestazione della tabella e selezionala.
In Origini > Sostituzioni, l'opzione di menu Elimina tutti gli override è stata sostituita dall'opzione Elimina con un comportamento preciso.

La precedente opzione Elimina tutti gli override non era chiara, perché eliminava solo gli override attivi nella sessione corrente, contrassegnati dall'icona con il punto viola .

La nuova opzione Elimina mostra un messaggio di avviso e chiede una conferma, quindi elimina la cartella su cui hai fatto clic e tutti i 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 di 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 si esegue una ricerca all'interno di file minimizzati. Quando fai clic su un risultato di ricerca, il file viene aperto nell'editor e la corrispondenza viene visualizzata non solo verticalmente ma anche orizzontalmente.

Il prima e il dopo la ricerca mostrano tutte le corrispondenze per riga.

Inoltre, la Ricerca ha migliorato la velocità. Puoi vedere il confronto prima (sinistra) e dopo (destra) nel video successivo.

Infine, la Ricerca ora supporta l'opzione Ignora elenco 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à workspace nel riquadro Origini è stata semplificata:

Denominazione coerente. In particolare, il riquadro Origini > File system è stato rinominato in Area di lavoro. I vari testi dell'interfaccia utente in questo riquadro ora sono più chiari e privi di ridondanza.
Configurazione migliorata. Scopri i consigli migliori per trascinare le cartelle o fai clic su un link per selezionare una cartella.

Origini > Area di lavoro ti consente di sincronizzare le modifiche apportate in DevTools direttamente nei file di origine.

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

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

Riordina i riquadri in Origini

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

Problemi di Chromium: 1473758.

Evidenziazione della sintassi e creazione di grafici per altri tipi di script

Ora il riquadro Origini può:

Formatta il codice JavaScript incorporato nei seguenti tipi di script: module, importmap, speculationrules.
Evidenzia la sintassi dei tipi di script importmap e speculationrules, entrambi con JSON.

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

Per saperne di più sulle regole di speculazione, consulta l'articolo Prerendering delle pagine in Chrome per navigazioni immediate nelle pagine.

Problema di Chromium: 1473875.

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

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

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

Problema di Chromium: 1424879.

Faro 11

Il riquadro Lighthouse ora esegue Lighthouse 11. In particolare, questa versione rimuove la navigazione precedente e aggiunge nuovi controlli dell'accessibilità e cambia il punteggio della categoria di accessibilità.

Vedi anche l'elenco completo delle modifiche. Per apprendere 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 sinistra, imposta lo stato attivo sul pulsante Salva accanto alle istantanee con Tab e premi Invio per selezionare la cartella.

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

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

Varie in evidenza

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

Rete: nuove icone per i tipi di risorse più utilizzate: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
Il colore viene aggiornato ai colori del materiale 3 in molti elementi dell'interfaccia utente, in particolare nei riquadri Elementi e Prestazioni (1456690, 1472243).
La funzionalità Problemi ora consente di gestire i problemi relativi ai cookie in tutte le navigazioni (1466601).
Diversi miglioramenti relativi a Applicazione > Precaricamento, in particolare griglie ordinabili e dettagli aggiornati del set di regole (1410709).
Vari miglioramenti dell'editor dei comandi in Monitoraggio del protocollo, in particolare avvisi relativi a input errati, modifica di un comando inviato, editor per i parametri degli oggetti senza chiavi predefinite, supporto per enum non definite dai riferimenti, oggetti senza riferimento del tipo, comandi di filtro per corrispondenze di sottostringhe e altro ancora (1448050).
Il grafico a fiamma Prestazioni ha un bordo intorno alla casella del totale sul grafico a torta (1470147).
Le origini ora non trattano i trattini come caratteri di parole nei CSS (1471354).
Il completamento automatico ora ordina sempre le parole chiave CSS alla fine.
I filtri RegEx ora supportano gli spazi (1346936).
Elementi corretti per il rilevamento delle funzionalità di query supporti (1472693).

Scarica i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o beta come browser di sviluppo predefinito. Questi canali in anteprima ti consentono di accedere alle funzionalità di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.