Novità di DevTools (Chrome 61)

Kayce Basques

Le nuove funzionalità e i cambiamenti principali in arrivo in DevTools in Chrome 61 includono:

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

Dai un'occhiata alla versione video delle note di rilascio qui sotto oppure continua a leggere per ulteriori informazioni.

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

Il menu Limitazione della Modalità dispositivo ora è esposto per impostazione predefinita e ora consente di simulare una 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 Definizioni di Dispositivi mobili di fascia media e Dispositivi mobili di fascia bassa

Visualizza utilizzo dello spazio di archiviazione

La nuova sezione Utilizzo nella scheda Cancella dati archiviati del riquadro Applicazione mostra come spazio di archiviazione utilizzato da un'origine, oltre alla quota massima per l'origine su questo dispositivo.

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

Vedi quando un service worker ha memorizzato le risposte nella cache

La nuova colonna Ora cache nella scheda Spazio di archiviazione cache mostra quando un Service worker memorizzato nella cache diverse.

Figura 4. Colonna Ora cache

Attiva il misuratore di f/s dal menu dei comandi

Ora puoi attivare l'opzione Misuratore f/s dal menu dei comandi.

Figura 5. Attivare lo strumento di misurazione f/s dal menu dei comandi

Imposta la rotellina del mouse per lo zoom o lo scorrimento con le registrazioni delle prestazioni

Apri Impostazioni e configura la nuova impostazione Azione rotellina del mouse del diagramma a fiamma per modificare la modalità le rotelline del mouse si comportano sul riquadro Prestazioni.

Ad esempio, quando utilizzi la rotellina del mouse sulla sezione Principale di una registrazione o quando scorri con due dita su un trackpad, il comportamento predefinito prevede l'aumento o la riduzione dello zoom. Quando modifichi l'impostazione Scorri, questo gesto ora scorre verso l'alto o verso il basso.

Figura 6. Impostazione Azione rotellina del mouse del diagramma a fiamma

Supporto del debug per i moduli ES6

I moduli ES6 vengono forniti in modo nativo in Chrome 61. Non c'è molto da fare in merito a DevTools, a parte il fatto che il debug funziona come previsto. Prova a impostare alcuni punti di interruzione in e esamineremo l'implementazione del modulo ES6 di Paul irlandese su 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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e 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 utilizzando 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.

Novità di DevTools

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