Novità di DevTools (Chrome 61)

Kayce Basques

Le nuove funzionalità e le modifiche principali in arrivo in DevTools in Chrome 61 includono:

• Simulazione della limitazione del dispositivo mobile. Imposta contemporaneamente la limitazione della CPU e della rete per simulare dispositivi mobili di fascia media o bassa.
• Utilizzo dello spazio di archiviazione. Visualizza la quantità di spazio di archiviazione utilizzata da un'origine, suddivisa per tecnologia (IndexedDB, cache, locale, sessione e così via).
• Timestamp della cache. Visualizza quando un service worker ha memorizzato nella cache una risposta.
• Attiva il misuratore di FPS dal menu dei comandi.
• Modifica il comportamento della rotellina del mouse e del trackpad nel riquadro Rendimento.
• Esegui il debug dei moduli ES6 in modo nativo.

Guarda la versione video di queste note di rilascio qui sotto o continua a leggere per saperne di più.

Simulare dispositivi mobili di fascia bassa e media in modalità dispositivo

Il menu Limitazione della modalità Dispositivo ora è esposto per impostazione predefinita e ti consente di simulare un dispositivo mobile di fascia bassa o media con un paio di clic.

Figura 1. Il menu Limitazione

Figura 2. Passa il mouse sopra il menu Limitazione o apri il menu Impostazioni di acquisizione per visualizzare le definizioni di Dispositivo mobile di fascia media e Dispositivo mobile di fascia bassa.

Visualizzare l'utilizzo dello spazio di archiviazione

La nuova sezione Utilizzo nella scheda Svuota spazio di archiviazione del riquadro Applicazione mostra la quantità di spazio di archiviazione utilizzata da un'origine, nonché la quota massima per l'origine su questo dispositivo.

Figura 3. La sezione Utilizzo mostra che https://airhorner.com sta utilizzando 66,9 KB della quota di 15214 MB dell'origine.

Visualizzare quando un service worker ha memorizzato nella cache le risposte

La nuova colonna Ora memorizzazione nella cache nella scheda Spazio di archiviazione della cache mostra quando un service worker ha memorizzato nella cache le risposte.

Figura 4. Colonna Ora memorizzazione nella cache

Attivare il misuratore FPS dal menu dei comandi

Ora puoi attivare il misuratore di FPS dal menu dei comandi.

Figura 5. Attivazione del contatore FPS dal menu dei comandi

Impostare il comportamento della rotellina del mouse per aumentare o ridurre lo zoom con le registrazioni delle prestazioni

Apri Impostazioni e imposta la nuova impostazione Azione rotellina mouse grafico a fiamma per modificare il comportamento delle rotelline del mouse nel riquadro Rendimento.

Ad esempio, quando utilizzi una rotellina del mouse nella sezione Principale di una registrazione o quando scorri con due dita su un trackpad, il comportamento predefinito è quello di aumentare o diminuire lo zoom. Quando modifichi l'impostazione in Scorrimento, questo gesto ora scorre verso l'alto o verso il basso.

Figura 6. L'impostazione Azione rotellina del mouse sul flame chart

Supporto del debug per i moduli ES6

I moduli ES6 vengono forniti in modo nativo in Chrome 61. Non c'è molto da dire su DevTools, a parte il fatto che il debug funziona come previsto. Prova a impostare alcuni punti di interruzione e a eseguire il debug dell'implementazione del modulo ES6 di Paul Irish di TodoMVC per vedere di persona.

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.