Novità in DevTools (Chrome 75)

Kayce Basques

Ciao! Ecco le novità di Chrome DevTools in Chrome 75.

Versione video di questa pagina

Valori preimpostati significativi durante il completamento automatico delle funzioni CSS

Alcune proprietà CSS, come filter, accettano funzioni come valori. Ad esempio, filter: blur(1px) aggiunge una sfocatura di 1 pixel a un nodo. Durante il completamento automatico di proprietà come filter, DevTools ora compila la proprietà con un valore significativo, così puoi visualizzare l'anteprima del tipo di modifica che avrà il valore sul nodo.

Il vecchio comportamento di completamento automatico.

Figura 1. Il comportamento di completamento automatico precedente. DevTools completa automaticamente con filter: blur e non viene visualizzata alcuna variazione nell'area visibile.

Il nuovo comportamento di completamento automatico.

Figura 2. Il nuovo comportamento di completamento automatico. DevTools completa automaticamente con filter: blur(1px) e la modifica è visibile nell'area visibile.

Problema pertinente di Chromium: #931145

Cancellare i dati del sito dal menu di comando

Premi Control+Maiusc+P o Comando+Maiusc+P (Mac) per aprire il menu di comando, quindi esegui il comando Cancella dati dei siti per cancellare tutti i dati relativi alla pagina, tra cui: Service worker, localStorage, sessionStorage, IndexedDB, Web SQL, Cookie, Cache e Cache dell'applicazione.

Il comando Cancella dati dei siti.

Figura 3. Il comando Cancella dati del sito.

La possibilità di cancellare i dati dei siti è disponibile da un po' di tempo in Applicazione > Cancella dati di archiviazione. La nuova funzionalità di Chrome 75 è la possibilità di eseguire il comando dal menu dei comandi.

Se non vuoi eliminare tutti i dati del sito, puoi controllare quali dati vengono eliminati da Applicazione > Cancella dati archiviati.

Scheda "Applicazione" con "Cancella dati archiviati" selezionato.

Figura 4. App > Cancella dati archiviati.

Problema Chromium pertinente: #942503

Visualizza tutti i database IndexedDB

In precedenza, Application > IndexedDB consentiva di ispezionare i database IndexedDB solo dall'origine principale. Ad esempio, se nella tua pagina avevi un <iframe> che utilizzava IndexedDB, non avresti potuto vedere i relativi database.<iframe> A partire da Chrome 75, DevTools mostra i database IndexedDB per tutte le origini.

Il vecchio comportamento. La pagina incorpora una demo che utilizza IndexedDB, ma non sono visibili database.

Figura 5. Il vecchio comportamento. La pagina incorpora una demo che utilizza IndexedDB, ma nessun database è visibile.

Il nuovo comportamento. I database della demo sono visibili.

Figura 6. Il nuovo comportamento. I database della demo sono visibili.

Problema Chromium pertinente: #943770

Visualizzare le dimensioni non compresse di una risorsa al passaggio del mouse

Supponiamo che tu stia ispezionando l'attività di rete. Il tuo sito utilizza la compressione del testo per ridurre le dimensioni per il trasferimento delle risorse. Vuoi sapere quanto sono grandi le risorse della pagina dopo che il browser le ha decompresse. In precedenza, queste informazioni erano disponibili solo quando si utilizzavano righe di richieste di grandi dimensioni. Ora puoi accedere a queste informazioni passando il mouse sopra la colonna Dimensioni.

Passa il mouse sopra la colonna Dimensioni per visualizzare le dimensioni non compresse di una risorsa.

Figura 7. Passa il mouse sopra la colonna Dimensioni per visualizzare le dimensioni non compresse di una risorsa.

Problema Chromium pertinente: #805429

Punti di interruzione in linea nel riquadro dei punti di interruzione

Supponiamo di aggiungere un punto di interruzione riga di codice alla seguente riga di codice:

document.querySelector('#dante').addEventListener('click', logWarning);

Da un po' di tempo, DevTools ti consente di specificare esattamente quando deve essere messa in pausa in un punto di interruzione come questo: all'inizio della riga, prima della chiamata di document.querySelector('#dante') o prima della chiamata di addEventListener('click', logWarning). Se abiliti tutti e tre, stai essenzialmente creando tre punti di interruzione. In precedenza, il riquadro Punti di interruzione non offriva la possibilità di gestire questi tre punti di interruzione singolarmente. A partire da Chrome 75, ogni punto di interruzione in linea ha una propria voce nel riquadro Punti di interruzione.

Il vecchio comportamento. Nel riquadro Punti di interruzione è presente una sola voce.

Figura 8. Il vecchio comportamento. Nel riquadro Punti di interruzione è presente una sola voce.

Il nuovo comportamento. Nel riquadro Punti di interruzione sono presenti tre voci.

Figura 9. Il nuovo comportamento. Nel riquadro Punti di interruzione sono presenti tre voci.

Problema Chromium pertinente: #927961

Conteggi delle risorse IndexedDB e Cache

I riquadri IndexedDB e Cache ora indicano il numero totale di risorse in un database o nella cache.

Voci totali in un database IndexedDB.

Figura 10. Voci totali in un database IndexedDB.

Problemi pertinenti di Chromium: #941197, #930773, #930865

Impostazione per disattivare la descrizione comando di ispezione dettagliata

Chrome 73 ha introdotto descrizioni comando dettagliate in modalità di ispezione.

Una descrizione comando dettagliata.

Figura 11. Una descrizione comando dettagliata che mostra colore, carattere, margine e contrasto.

Ora puoi disattivare queste descrizioni comando dettagliate da Impostazioni > Preferenze > Elementi > Mostra descrizione comando di ispezione dettagliata.

Una descrizione comando minima.

Figura 12. Una descrizione comando minima che mostra solo la larghezza e l'altezza.

Problema pertinente di Chromium: #948417

Impostazione per attivare/disattivare il rientro di tabulazione nell'editor del riquadro Origini

I test di accessibilità hanno rivelato che era presente una trappola per schede nell'editor. Una volta che un utente della tastiera aveva premuto Tab nell'editor, non aveva modo di uscire perché il tasto Tab veniva utilizzato per l'indentazione. Per ignorare il comportamento predefinito e utilizzare Tab per spostare lo stato attivo, attiva Impostazioni > Preferenze > Origini > Attiva spostamento stato attivo con Tab.

Di recente abbiamo lavorato molto per rendere l'interfaccia utente di DevTools più navigabile con la tastiera. Per scoprire di più, consulta l'articolo di Rob Navigare in Chrome DevTools con le tecnologie per la disabilità.

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 delle nuove funzionalità, degli aggiornamenti o di qualsiasi altra cosa relativa a DevTools.

Novità di DevTools

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