Novità di DevTools (Chrome 67)

Kayce Basques

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

• Cerca in tutte le intestazioni di rete
• Anteprime dei valori delle variabili CSS nel riquadro Stili
• Copia come fetch
• Nuovi controlli, opzioni di configurazione per computer e visualizzazione delle tracce
• Interrompi i loop infiniti
• Tempi utente nelle schede Prestazioni
• Istanze di VM JavaScript elencate chiaramente nel riquadro Memoria
• La scheda Rete nel riquadro Origini è stata rinominata in scheda Pagina
• Aggiornamenti del tema scuro
• Informazioni sulla trasparenza dei certificati nel riquadro Sicurezza
• Funzionalità di isolamento dei siti nel riquadro Prestazioni

Versione video delle note di rilascio:

Cerca in tutte le intestazioni e le risposte di rete

Apri il riquadro Rete, quindi premi Comando+F (Mac) o Ctrl+F (Windows, Linux, ChromeOS) per aprire il nuovo riquadro Ricerca di rete. DevTools cerca la query fornita nelle intestazioni e nei corpi di tutte le richieste di rete.

Figura 1. Ricerca del testo cache-control con il nuovo riquadro Ricerca di rete

Fai clic su Maiuscole/minuscole per rendere la query sensibile alle maiuscole. Fai clic su Utilizza espressione regolare per visualizzare i risultati che corrispondono al pattern fornito. Non è necessario racchiudere l'espressione regolare tra barre.

Figura 2. Una query con espressione regolare nel riquadro Ricerca di rete.

Aggiornamenti alla UI del riquadro di ricerca

La UI del riquadro Ricerca globale ora corrisponde alla UI del nuovo riquadro Ricerca di rete. Ora formatta anche i risultati per facilitarne la lettura.

Figura 3. La vecchia UI a sinistra e la nuova UI a destra

Premi Comando+Opzione+F (Mac) o Ctrl+Maiusc+F (Windows, Linux, ChromeOS) per aprire la ricerca globale. Puoi anche aprirlo tramite il Menu comando.

Anteprime dei valori delle variabili CSS nel riquadro Stili

Quando il valore di una proprietà di colore CSS, ad esempio background-color o color, è impostato su una variabile CSS, DevTools ora mostra un'anteprima di quel colore.

Figura 4. Nella vecchia UI a sinistra, non è presente un'anteprima del colore accanto a color: var(--main-color), mentre nella nuova UI a destra è presente

Copia come fetch

Fai clic con il tasto destro del mouse su una richiesta di rete, quindi seleziona Copia > Copia come recupero per copiare negli appunti il codice equivalente a fetch() per la richiesta.

Figura 5. Copia del codice equivalente a fetch() per una richiesta

DevTools genera un codice simile al seguente:

fetch("https://preload.glitch.me/styles.css", {
  "credentials": "omit",
  "headers": {},
  "referrer": "https://preload.glitch.me/after/",
  "referrerPolicy": "no-referrer-when-downgrade",
  "body": null,
  "method": "GET",
  "mode": "cors"
});

Aggiornamenti del riquadro Controlli

Nuovi controlli

Il riquadro Controlli contiene due nuovi controlli, tra cui:

• Precarica le richieste chiave. Il precaricamento delle richieste può velocizzare il tempo di caricamento della pagina fornendo al browser suggerimenti per scaricare il prima possibile le risorse importanti per il percorso di rendering critico.
• Evita il testo invisibile durante il caricamento dei caratteri web. Se ti assicuri che il testo sia visibile durante il caricamento dei caratteri web, la pagina diventa più utile per gli utenti più rapidamente.

Nuove opzioni di configurazione

Ora puoi configurare il riquadro Controlli per:

• Conserva le impostazioni della finestra visibile e dello user agent per computer. In altre parole, puoi impedire al riquadro Controlli di simulare un dispositivo mobile.
• Disattiva la limitazione della rete e della CPU.
• Conserva lo spazio di archiviazione, ad esempio LocalStorage e IndexedDB, tra i controlli.

Figura 6. Nuove opzioni di configurazione dell'audit

Visualizza tracce

Dopo aver controllato una pagina, fai clic su Visualizza traccia per visualizzare i dati sul rendimento del caricamento su cui si basa il controllo nel riquadro Prestazioni.

Figura 7. Il pulsante Visualizza traccia

Interrompi i loop infiniti

Se lavori spesso con i loop for, do...while o con la ricorsione, probabilmente hai eseguito un loop infinito per errore durante lo sviluppo del tuo sito. Per interrompere il loop infinito, ora puoi:

1. Apri il riquadro Origini.
2. Fai clic su Metti in pausa . Il pulsante diventa Riprendi l'esecuzione dello script .
3. Tieni premuto Riprendi esecuzione script , quindi seleziona Interrompi chiamata JavaScript corrente .

Nel video qui sopra, l'orologio viene aggiornato tramite un timer setInterval(). Se fai clic su Avvia loop infinito, viene eseguito un loop do...while che non si interrompe mai. L'intervallo riprende perché non era in esecuzione quando è stata selezionata l'opzione Interrompi chiamata JavaScript corrente .

Tempi utente nelle schede Rendimento

Quando visualizzi una registrazione delle prestazioni, fai clic sulla sezione Tempi utente per visualizzare le misure dei Tempi utente nelle schede Riepilogo, Bottom-Up, Albero delle chiamate e Log eventi.

Figura 8. Visualizzazione delle misurazioni dei tempi utente nella scheda Bottom-up. La barra blu a sinistra della sezione Tempi utente indica che è selezionata.

In generale, ora puoi selezionare una qualsiasi delle sezioni (Thread principale, Tempi utente, GPU, ScriptStreamer e così via) e visualizzare l'attività della sezione nelle schede.

Seleziona le istanze di VM JavaScript nel riquadro Memoria

Il riquadro Memoria ora elenca chiaramente tutte le istanze VM JavaScript associate a una pagina, anziché nasconderle dietro il menu a discesa Destinazione come in precedenza.

Figura 9. Nella vecchia UI a sinistra, le istanze VM JavaScript sono nascoste dietro il menu a discesa Target, mentre nella nuova UI a destra sono mostrate nella tabella Seleziona istanza VM JavaScript

Accanto all'istanza developers.google.com sono presenti due valori: 8.7 MB e 13.3 MB. Il valore a sinistra rappresenta la memoria allocata a causa di JavaScript. Il valore a destra rappresenta tutta la memoria del sistema operativo allocata a causa di quell'istanza VM. Il valore a destra include il valore a sinistra. In Gestione attività di Chrome, il valore a sinistra corrisponde a JavaScript Memory e quello a destra corrisponde a Memory Footprint.

Scheda Rete rinominata in Scheda Pagina

Nel riquadro Origini, la scheda Rete ora si chiama Pagina.

Figura 10. Nella vecchia UI a sinistra, la scheda che mostra le risorse della pagina si chiama Rete, mentre nella nuova UI a destra si chiama Pagina.

Aggiornamenti del tema scuro

Chrome 67 include una serie di modifiche minori alla combinazione di colori del tema scuro. Ad esempio, le icone dei punti di interruzione e la riga di esecuzione corrente sono ora verdi.

Figura 11. Uno screenshot della nuova icona del punto di interruzione e della combinazione di colori della riga di esecuzione corrente

Certificate Transparency nel riquadro Sicurezza

Il riquadro Sicurezza ora riporta le informazioni sulla trasparenza dei certificati.

Figura 12. Informazioni sulla trasparenza della certificazione nel riquadro Sicurezza

Isolamento dei siti nel riquadro Prestazioni

Se hai attivato l'isolamento dei siti, il riquadro Prestazioni ora fornisce un flame chart per ogni processo, in modo da poter vedere il lavoro totale causato da ciascun processo.

Figura 13. Flame chart per processo in una registrazione delle prestazioni

Scarica i canali in 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 le API della piattaforma web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli 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 di DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet a @ChromeDevTools.
• Lascia commenti 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.