Novità di DevTools (Chrome 67)

Kayce Basques
Kayce Basques
X GitHub

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

Versione video delle note di rilascio:

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

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

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

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

Una query con espressione regolare nel riquadro Ricerca nella rete.

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

L'interfaccia utente del riquadro Ricerca globale ora corrisponde a quella del nuovo riquadro Ricerca rete. Ora formatta anche i risultati per facilitarne la lettura.

La UI precedente e quella nuova.

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

Premi Comando+Opzione+F (Mac) o Controllo+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à di colore CSS, ad esempio background-color o color, è impostato su una variabile CSS, DevTools ora mostra un'anteprima del colore.

Esempio di valori di colore delle variabili CSS.

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 elemento recuperato

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

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

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

DevTools produce 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:

Nuove opzioni di configurazione

Ora puoi configurare il riquadro Audit per:

  • Conserva le impostazioni della finestra di visualizzazione del desktop e dello user agent. 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, durante i controlli.

Nuove opzioni di configurazione del controllo.

Figura 6. Nuove opzioni di configurazione del controllo

Visualizza tracce

Dopo aver eseguito l'audit di una pagina, fai clic su Visualizza traccia per visualizzare i dati sul rendimento del caricamento su cui si basa l'audit nel riquadro Rendimento.

Il pulsante Visualizza traccia.

Figura 7. Il pulsante Visualizza traccia

Interrompere 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 Metti in pausa. Il pulsante cambia in Riprendi l'esecuzione dello script Riprendi.
  3. Tieni premuto Riprendi esecuzione dello script Riprendi, poi seleziona Interrompi la chiamata di JavaScript corrente Interrompi.

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

Tempi utente nelle schede Rendimento

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

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

Figura 8. Visualizzazione delle misure di User Timing nella scheda Dal basso verso l'alto. La barra blu a sinistra della sezione User Timing indica che è selezionata.

In generale, ora puoi selezionare una qualsiasi delle sezioni (Thread principale, User Timing, 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 nel menu a discesa Destinazione come in precedenza.

Screenshot del pannello Memoria prima e dopo.

Figura 9. Nella vecchia UI a sinistra, le istanze VM JavaScript sono nascoste nel menu a discesa Destinazione, mentre nella nuova UI a destra vengono visualizzate 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 che viene allocata a causa di questa 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.

La scheda Rete è stata rinominata in scheda Pagina

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

Due finestre di DevTools affiancate, che mostrano la modifica del nome.

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 piccole modifiche alla combinazione di colori del tema scuro. Ad esempio, le icone dei punti di interruzione e la riga di esecuzione corrente sono ora verdi.

Uno screenshot della nuova icona del punto di 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

Certificate Transparency nel pannello Sicurezza

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

Informazioni sulla trasparenza dei certificati nel pannello Sicurezza.

Figura 12. Informazioni sulla trasparenza delle certificazioni nel pannello Sicurezza

Isolamento dei siti nel riquadro Prestazioni

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

Grafici a fiamma per processo in una registrazione delle prestazioni.

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

Scaricare i canali in anteprima

Prendi in considerazione l'utilizzo di Chrome Canary, Dev o Beta come browser di sviluppo predefinito. Questi canali di anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

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

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.