Novità di DevTools (Chrome 67)

Kayce Basques

Le nuove funzionalità e le modifiche principali che verranno introdotte in DevTools in Chrome 67 includono:

Versione video delle note di rilascio:

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

Ricerca del testo "cache-control" con il nuovo riquadro Ricerca rete.

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

Fai clic su Corrispondenza maiuscole/minuscole Maiuscole/minuscole per fare in modo che la query sia sensibile alle maiuscole. Fai clic su Utilizza espressione regolare Usa espressione regolare per visualizzare i risultati corrispondenti al pattern specificato. Non è necessario racchiudere la RegEx tra barre oblique.

Una query con espressioni regolari nel riquadro Ricerca nella rete.

Figura 2. Una query con espressioni regolari nel riquadro Ricerca nella rete.

L'interfaccia utente del riquadro Ricerca globale ora corrisponde a quella del nuovo riquadro Ricerca di rete. Ora inoltre visualizza i risultati in un formato più leggibile per facilitarne la scansione.

La vecchia e la nuova UI.

Figura 3. La vecchia interfaccia utente a sinistra e la nuova a destra

Premi Comando+Opzione+F (Mac) o Ctrl+Maiusc+F (Windows, Linux, ChromeOS) per aprire la Ricerca globale. Puoi aprirlo anche tramite il menu dei comandi.

Anteprime dei valori delle variabili CSS nel riquadro Stili

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

Un esempio di valori di colore delle variabili CSS.

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

Copia come recupero

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

Copia il codice equivalente a fetch() per una richiesta.

Figura 5. Copiare il codice equivalente a fetch() per una richiesta

DevTools genera codice come il 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:

Nuove opzioni di configurazione

Ora puoi configurare il riquadro Controlli per:

  • Mantieni le impostazioni dell'area visibile del desktop e dell'agente utente. In altre parole, puoi impedire al riquadro Controlli di simulare un dispositivo mobile.
  • Disattiva la limitazione della rete e della CPU.
  • Mantieni lo spazio di archiviazione, ad esempio localStorage e IndexedDB, durante i controlli.

Nuove opzioni di configurazione del controllo.

Figura 6. Nuove opzioni di configurazione del controllo

Visualizza tracce

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

Il pulsante Visualizza traccia.

Figura 7. Pulsante Visualizza traccia

Interrompere i loop infiniti

Se utilizzi spesso loop for, loop do...while o ricorsione, è probabile che tu abbia eseguito per errore un loop infinito 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 Metti in pausa. Il pulsante diventa Riprendi esecuzione script Riprendi.
  3. Tieni premuto Riprendi esecuzione dello script Riprendi, quindi seleziona Interrompi chiamata JavaScript corrente Interrompi.

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 la chiamata di JavaScript corrente Interrompi.

Tempo di utilizzo nelle schede Rendimento

Quando visualizzi una registrazione del rendimento, fai clic sulla sezione Tempi dell'utente per visualizzare le misurazioni Tempi dell'utente nelle schede Riepilogo, Dal basso verso l'alto, Albero chiamate e Log eventi.

Visualizzazione delle misure User Timing nella scheda Dal basso verso l'alto.

Figura 8. Visualizzazione delle misure User Timing nella scheda Bottom-Up. La barra blu a sinistra della sezione Tempi dell'utente indica che è selezionata.

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

Seleziona le istanze 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.

Screenshot del riquadro Memoria prima e dopo le modifiche.

Figura 9. Nella vecchia UI a sinistra, le istanze VM JavaScript sono nascoste dietro il menu a discesa Destinazione, mentre nella nuova UI a destra vengono 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 di sinistra rappresenta la memoria allocata a causa di JavaScript. Il valore corretto rappresenta tutta la memoria del sistema operativo che viene allocata a causa dell'istanza VM. Il valore a destra è incluso nel valore a sinistra. Nella Gestione attività di Chrome, il valore a sinistra corrisponde a JavaScript Memory e quello a destra corresponde a Memory Footprint.

La scheda Rete è stata rinominata in Pagina

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

Due finestre DevTools affiancate che mostrano la modifica del nome.

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

Aggiornamenti del tema scuro

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

Uno screenshot della nuova icona dell'interruzione e della combinazione di colori della riga di esecuzione corrente.

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

Trasparenza dei certificati nel riquadro Sicurezza

Il riquadro Sicurezza ora riporta informazioni sulla trasparenza dei certificati.

Informazioni sulla trasparenza del certificato nel riquadro Sicurezza.

Figura 12. Informazioni sulla trasparenza della certificazione nel riquadro Sicurezza

Isolamento dei siti nel riquadro Rendimento

Se hai attivato l'isolamento dei siti, il riquadro Rendimento ora fornisce un grafico a forma di fiamma per ogni processo, in modo da poter vedere il lavoro totale generato da ciascun processo.

Grafici di fiamma per processo in una registrazione delle prestazioni.

Figura 13. Grafici a fiamme per processo in una registrazione del rendimento

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.

Novità di DevTools

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