Novità di DevTools (Chrome 61)

Kayce Basques

Le nuove funzionalità e le modifiche principali che verranno introdotte 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).
• Memorizza nella cache i timestamp. Visualizza quando un service worker ha memorizzato nella cache una risposta.
• Attiva il misuratore FPS dal menu di comando.
• Modificare 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 di seguito o continua a leggere per saperne di più.

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

Il menu Ritardo della modalità Dispositivo è ora visibile 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 Ritardo 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 Libera spazio di archiviazione del riquadro Applicazione mostra quanto spazio di archiviazione utilizza un'origine, nonché la quota massima per l'origine su questo dispositivo.

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

Visualizzare quando un worker del servizio ha memorizzato nella cache le risposte

La nuova colonna Ora memorizzata nella cache nella scheda Memoria cache mostra quando un worker del servizio ha memorizzato nella cache le risposte.

Figura 4. La colonna Ora memorizzata nella cache

Attivare il misuratore FPS dal menu di comando

Ora puoi attivare il metro FPS dal menu dei comandi.

Figura 5. Attivazione del contatore FPS dal menu di comando

Impostare il comportamento della rotellina del mouse per aumentare o diminuire lo zoom o scorrere con le registrazioni del rendimento

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

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

Figura 6. L'impostazione Azione rotellina del mouse sul grafico a forma di fiamma

Supporto per il debug dei moduli ES6

I moduli ES6 sono disponibili in modo nativo in Chrome 61. Non c'è molto da fare per quanto riguarda DevTools, a parte il fatto che il debug funziona come previsto. Prova a impostare alcuni punti di interruzione e a eseguire il walkthrough dell'implementazione del modulo ES6 di Paul Irish di TodoMVC per verificare di persona.

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 i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o qualsiasi altro argomento relativo a DevTools.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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