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 il @proprietà CSS at-rule. 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 relativi a Chromium: 1471102, 1471103, 1471105.

Altri miglioramenti delle sostituzioni locali

Nell'ambito del flusso di miglioramenti nella versione precedente, gli override locali ora eseguono le seguenti operazioni:

In Origini > Pagina, quando fai clic con il tasto destro del mouse su un file mappato alla fonte e selezioni Esegui l'override dei contenuti, DevTools mostrerà una finestra di dialogo che ti porta alla fonte originale. I contenuti dei file mappati di origine non possono essere sostituiti.
Il riquadro Rete ottiene una nuova colonna Con override e un filtro has-overrides:[content|headers|yes|no] corrispondente. Per visualizzare la colonna Con 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.

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 conferma, quindi elimina la cartella su cui hai fatto clic e tutti i suoi contenuti.

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

Problemi relativi a 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 tra file minimizzati. Quando fai clic su un risultato di ricerca, il file viene aperto nell'editor e la corrispondenza viene ora visualizzata non solo in verticale, ma anche in orizzontale.

I termini prima e dopo l'esecuzione della ricerca mostrano tutte le corrispondenze per riga.

Inoltre, la Ricerca ha registrato un miglioramento della velocità. Guarda il confronto prima (a sinistra) e dopo (a destra) nel prossimo video.

Infine, la Ricerca ora supporta l'opzione Ignora elenco e non mostrerà i risultati relativi ai file ignorati.

Problemi relativi a Chromium: 1468875, 1472019.

Riquadro Origini migliorato

Area di lavoro semplificata nel riquadro Origini

La funzionalità area di lavoro 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 sono ora più chiari e privi di ridondanza.
Configurazione migliorata. Scopri suggerimenti migliori per trascinare le cartelle o fai clic su un link per selezionare una cartella.

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

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

Problemi relativi a Chromium: 1473771, 1473880, 1473963, 1474686, 1474687.

Riordinare i riquadri nelle Origini

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

Problemi relativi a Chromium: 1473758.

Evidenziazione della sintassi e realizzazione grafica 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 contenenti JSON.

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

Per maggiori informazioni sulle regole di speculazione, consulta l'articolo Prerenderizzare le pagine in Chrome per la navigazione istantanea nelle pagine.

Problema relativo a Chromium: 1473875.

Emula la funzionalità dei contenuti multimediali preferiti-trasparenza ridotta

Chrome 118 ora supporta la funzionalità per i contenuti multimediali prefers-reduced-transparency. Questa funzionalità consente agli sviluppatori di adattare i contenuti web alle preferenze selezionate dall'utente in modo da ridurre la 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 relativo a Chromium: 1424879.

Faro 11

Nel riquadro Lighthouse ora è in esecuzione Lighthouse 11. In particolare, questa versione rimuove la navigazione precedente, aggiunge nuovi controlli di accessibilità e modifica il punteggio della categoria di accessibilità.

Consulta 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 relativo a Chromium: 772558.

Miglioramenti all'accessibilità

DevTools ora supporta un maggior numero di sequenze di tasti di navigazione:

Panoramica di 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 agli snapshot con Tab e premi Invio per selezionare la cartella.

Inoltre, sono stati risolti diversi problemi relativi agli annunci dello screen reader.

Problemi relativi a Chromium: 1470401, 1471301, 1474108, 1468631.

Varie in evidenza

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

Rete: nuove icone per i tipi di risorse più utilizzate: media, wasm, websocket, manifest, fetch/xhr, json (1466298).
Aggiornamenti dei colori dei colori del materiale 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).
Diversi miglioramenti in Applicazione > Precaricamento, in particolare le griglie ordinabili e dettagli rivisti del set di regole (1410709).
Vari miglioramenti dell'editor dei comandi in Protocol monitor, in particolare gli avvisi relativi all'input errato, la modifica di un comando inviato, l'editor per i parametri degli oggetti senza chiavi predefinite, il supporto di enumerazioni non definite da riferimenti, oggetti senza riferimento al tipo, i comandi di filtro per corrispondenze di sottostringhe e altro ancora (1448050).
Il grafico a fiamme Rendimento ha un bordo intorno al riquadro del totale nel grafico a torta (1470147).
Le origini ora non trattano 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).
Rilevamento delle funzionalità di query supporti corretti per gli elementi (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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema di DevTools usando Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
Invia un tweet all'indirizzo @ChromeDevTools.
Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.