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 per i valori. Ad esempio, filter: blur(1px) aggiunge una sfocatura di 1 pixel a un nodo. Quando completi automaticamente le proprietà come filter, DevTools ora compila la proprietà con un valore significativo in modo da poter visualizzare l'anteprima del tipo di modifica che il valore avrà sul nodo.

Figura 1. Il vecchio comportamento di completamento automatico. DevTools esegue il completamento automatico fino a filter: blur e non è visibile alcuna modifica nell'area visibile.

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

Problema di Chromium pertinente: #931145

Cancellare i dati del sito dal menu di comando

Premi Controllo+Maiusc+P o Comando+Maiusc+P (Mac) per aprire il menu dei comandi e poi esegui il comando Cancella dati dei siti per cancellare tutti i dati relativi alla pagina, inclusi: service worker, localStorage, sessionStorage, IndexedDB, Web SQL, cookie, cache e cache di applicazioni.

Figura 3. Il comando Cancella dati dei siti.

La cancellazione dei dati dei siti è disponibile da tempo in Applicazione > Cancella spazio di archiviazione. La nuova funzionalità di Chrome 75 consente di eseguire il comando dal menu dei comandi.

Se non vuoi eliminare tutti i dati dei siti, puoi controllare quali dati vengono eliminati da Applicazione > Cancella spazio di archiviazione.

Figura 4. Applicazione > Cancella spazio di archiviazione.

Problema di Chromium pertinente: #942503

Visualizza tutti i database IndexedDB

In precedenza, Applicazione > IndexedDB ti consentiva di esaminare i database IndexedDB solo dall'origine principale. Ad esempio, se avevi un <iframe> sulla tua pagina e questo <iframe> utilizzava IndexedDB, non potresti vedere i suoi database. A partire da Chrome 75, DevTools mostra i database IndexedDB per tutte le origini.

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

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

Problema di 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 di trasferimento delle risorse. Vuoi vedere le dimensioni delle 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.

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

Problema di Chromium pertinente: #805429

Punti di interruzione in linea nel riquadro dei punti di interruzione

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

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

Da un po' di tempo a questa parte, gli strumenti di sviluppo ti consentono di specificare il momento esatto in cui deve essere messa in pausa un punto di interruzione in questo modo: all'inizio della riga, prima che venga chiamato document.querySelector('#dante') o prima che venga chiamato addEventListener('click', logWarning). Se li attivi tutti e tre, crei essenzialmente tre punti di interruzione. In precedenza, il riquadro Punti di interruzione non consentiva di gestire questi tre punti di interruzione singolarmente. A partire da Chrome 75, ogni punto di interruzione inline ha una propria voce nel riquadro Punti di interruzione.

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

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

Problema di 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.

Figura 10. Numero totale di voci in un database IndexedDB.

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

Impostazione per disattivare la descrizione comando di ispezione dettagliata

Chrome 73 ha introdotto descrizioni comando dettagliate in modalità Ispezione.

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 dettagliata dello strumento di ispezione.

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

Problema di Chromium pertinente: #948417

Impostazione per attivare/disattivare il rientro delle schede nell'editor del riquadro Origini

I test di accessibilità hanno rivelato che era presente un problema di navigazione con il tasto Tab nell'editor. Una volta che un utente che utilizza la tastiera ha selezionato la scheda Editor, non aveva modo di uscire dalla scheda perché il tasto Tab veniva utilizzato per il rientro. Per ignorare il comportamento predefinito e utilizzare il tasto Tab per spostare lo stato attivo, attiva Impostazioni > Preferenze > Fonti > Attiva lo spostamento dello stato attivo con il tasto Tab.

Di recente è stato fatto molto lavoro per rendere l'interfaccia utente di DevTools più navigabile con la tastiera. Per saperne di più, consulta l'articolo di Rob Navigare in Chrome DevTools con la tecnologia assistiva.

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.