Novità di DevTools (Chrome 58)

Kayce baschi
Kayce Basques

Ti diamo il benvenuto nella prima parte delle note di rilascio di DevTools. Da qui in poi, la prima volta che apri una nuova versione di Chrome, DevTools apre il riquadro a scomparsa Novità con un link alle note di rilascio relative a quella versione.

In evidenza

  • Il riquadro Cronologia è stato rinominato riquadro Prestazioni.
  • Il riquadro Profili è stato rinominato riquadro Memoria.
  • I valori dei cookie sono ora modificabili.
  • DevTools ora viene messo in pausa automaticamente prima degli errori di esaurimento della memoria.

Nuove funzionalità

Cookie modificabili

Fai doppio clic su una cella della scheda Cookie per modificare quel valore.

Modifica di un cookie.
Figura 1. Modifica di un cookie

Grazie a kdzwinel per il tuo contributo!

Variabili CSS esaminabili e modificabili nel riquadro Stili

Ora puoi esaminare e modificare le variabili CSS nel riquadro Stili. Per fare una prova, consulta la demo delle variabili CSS.

Punti di interruzione per esaurimento della memoria

Quando un'app alloca molta memoria in un breve periodo di tempo, DevTools ora si mette in pausa e aumenta automaticamente il limite di heap. In questo modo puoi ispezionare l'heap, eseguire comandi sulla console per liberare memoria e continuare a eseguire il debug del problema. Per ulteriori informazioni, consulta One Small Step for Chrome, One Giant Heap For V8.

Messo in pausa su un punto di interruzione per esaurimento della memoria
Figura 2. Messo in pausa su un punto di interruzione di memoria esaurita

Punti di interruzione nella creazione della tela

Ora puoi creare punti di interruzione listener di eventi che vengono attivati ogni volta che viene creato un nuovo contesto canvas.

Creazione di punti di interruzione canvas tramite la casella di controllo Crea contesto canvas nel riquadro Punti di interruzione listener di eventi
Figura 3. Punti di interruzione per la creazione di canvas tramite la casella di controllo Crea contesto canvas nel riquadro Punti di interruzione listener di eventi

Statistiche dell'ora di inizio nella scheda Tempi

Nella parte superiore della scheda Tempi, ora puoi vedere quando una richiesta è stata messa in coda e avviata.

Statistiche relative all'ora di inizio nella scheda Tempi.
Figura 4. Statistiche dell'ora di inizio nella scheda Tempi

Statistiche del server nella scheda Tempi

Ora puoi inserire statistiche server personalizzate nella scheda Tempi. Per un esempio, consulta la demo dei valori di temporizzazione del server.

Statistiche del server nella scheda Tempi
Figura 5. Statistiche del server nella scheda Tempistiche

Grazie a sroussey per il contributo!

Modifiche

Ora il riquadro Cronologia è il riquadro Prestazioni

Il riquadro Cronologia è stato rinominato riquadro Prestazioni per rifletterne meglio lo scopo.

Il riquadro Profili è ora il riquadro Memoria

Il riquadro Profili è stato rinominato nel riquadro Memoria per rifletterne meglio lo scopo.

Profiler CPU si trova dietro un riquadro nascosto

Ora che il riquadro Profili è chiamato riquadro Memoria, non ha più senso avere il profiler CPU in quel riquadro. Inoltre, l'obiettivo a lungo termine è fare in modo che tutti gli utenti eseguano la profilazione dal riquadro Rendimento. Nel frattempo, puoi ancora accedere al vecchio profiler CPU da Impostazioni > Altri strumenti > Profilor JavaScript.

Consulta Chrome DevTools: profilazione della CPU JavaScript in Chrome 58 per scoprire come profilare la CPU nel riquadro Prestazioni.

Nuova UI della console

Il riquadro della console e il riquadro a scomparsa hanno subito alcune modifiche all'interfaccia utente. Alcuni elementi impopolari sono stati spostati in posizioni più nascoste e quelli popolari ora sono più facilmente accessibili.

  • Fai clic su Impostazioni console Impostazioni della console per accedere alle impostazioni di personalizzazione del comportamento della console.
  • L'opzione Conserva log è ora nascosta nelle Impostazioni della console.
  • Il pulsante e il riquadro Filtri non sono più disponibili. Utilizza il menu a discesa.
  • Ora la casella di testo per filtrare i log viene sempre visualizzata. In precedenza era nascosto nel riquadro Filtri.
  • La casella di testo del filtro accetta automaticamente le espressioni regolari, quindi la casella di controllo Regex non è più disponibile.
  • La casella di controllo Nascondi violazioni non è più presente. Imposta il menu a discesa del livello di logging su Dettagliato per visualizzare le violazioni.
  • Deselezionare la casella di controllo Mostra tutti i messaggi nella UI precedente equivale a selezionare la casella di controllo Solo contesto selezionato nelle Impostazioni della console nella nuova UI.
La nuova UI della console
Figura 6. La nuova UI della console

I punti di interruzione del listener di eventi WebGL sono stati spostati

I punti di interruzione del listener di eventi di WebGL sono stati spostati dalla categoria WebGL alla categoria Canvas. La categoria WebGL è stata rimossa.