Novità di DevTools (Chrome 62)

Kayce Basques

Nuove funzionalità e modifiche in arrivo in DevTools in Chrome 62:

• Supporto degli operatori await di primo livello nella console.
• Screenshot di una parte dell'area visibile e screenshot di nodi HTML specifici.
• Evidenziazione della griglia CSS.
• Una nuova API Console per eseguire query sugli oggetti.
• Filtri esclusi e filtri URL nella console.
• Importazioni HAR nel riquadro Rete.
• Risorse cache visualizzabili in anteprima.
• Debug della cache più prevedibile.
• Copertura del codice a livello di blocco.

Operatori await di primo livello nella console

Console ora supporta gli operatori await di primo livello.

Figura 1. Utilizzo degli operatori await di primo livello nella console

Nuovi flussi di lavoro per gli screenshot

Ora puoi acquisire uno screenshot di una parte dell'area visibile o di un nodo HTML specifico.

Screenshot di una parte dell'area visibile

Per fare uno screenshot di una parte dell'area visibile:

1. Fai clic su Ispeziona o premi Comando+Maiusc+C (Mac) o Ctrl+Maiusc+C (Windows, Linux) per attivare la modalità di ispezione degli elementi.
2. Tieni premuto Comando (Mac) o Ctrl (Windows, Linux) e seleziona la parte della visualizzazione della pagina di cui vuoi fare uno screenshot.
3. Rilascia il mouse. DevTools scarica uno screenshot della parte selezionata.

Figura 2. Acquisisci uno screenshot di una parte dell'area visibile

Screenshot di nodi HTML specifici

Per fare uno screenshot di un nodo HTML specifico:

1. Seleziona un elemento nel riquadro Elementi.

   

   Figura 3. In questo esempio, l'obiettivo è acquisire uno screenshot dell'intestazione blu contenente il testo Tools. Tieni presente che questo nodo è già selezionato nella Tabella DOM del riquadro Elementi

2. Apri il menu dei comandi.

3. Inizia a digitare node e seleziona Capture node screenshot. DevTools scarica uno screenshot del nodo selezionato.

   

   Figura 4. Il risultato del comando Capture node screenshot

Evidenziazione della griglia CSS

Per visualizzare la griglia CSS che interessa un elemento, passa il mouse sopra un elemento nell'albero DOM del riquadro Elementi. Viene visualizzato un bordo tratteggiato attorno a ogni elemento della griglia. Questo funziona solo se all'elemento selezionato o all'elemento principale dell'elemento selezionato è stato applicato display:grid.

Figura 5. Evidenziare una griglia CSS

Guarda il video qui sotto per apprendere le nozioni di base di CSS Grid in meno di 2 minuti.

Una nuova API per eseguire query sugli oggetti heap

Chiama queryObjects(Constructor) dalla console per restituire un array di oggetti creati con il costruttore specificato. Ad esempio:

• queryObjects(Promise). Restituisce tutte le Promise.
• queryObjects(HTMLElement). Restituisce tutti gli elementi HTML.
• queryObjects(foo), dove foo è il nome di una funzione. Restituisce tutti gli oggetti che sono stati istigati tramite new foo().

L'ambito di queryObjects() è il contesto di esecuzione attualmente selezionato in Console. Consulta Selezionare il contesto di esecuzione.

Nuovi filtri di Console

La console ora supporta i filtri esclusi e URL.

Filtri negativi

Digita -<text> nella casella Filtro per escludere tutti i messaggi della console che includono <text>.

Figura 6. La prima istruzione registra one, two, three e four nella console. two è nascosto perché -two è inserito nella casella Filtro

DevTools filtra un messaggio se viene trovato <text>:

• Nel testo del messaggio.
• Nel nome del file da cui ha avuto origine il messaggio.
• Nel testo della traccia dello stack.

Il filtro escluso funziona anche con espressioni regolari come -/[4-5]*ms/.

Filtri URL

Digita url:<text> nella casella Filtra per visualizzare solo i messaggi provenienti da uno script il cui URL include <text>.

Il filtro utilizza la corrispondenza approssimativa. Se <text> compare in un punto qualsiasi dell'URL, DevTools mostra il messaggio.

Figura 7. Utilizzo del filtro URL per visualizzare solo i messaggi provenienti da script il cui URL include hymn. Se passi il mouse sopra il nome dello script, puoi vedere che il nome dell'host include questo testo

Importazioni HAR nel riquadro Rete

Trascina un file HAR nel riquadro Rete per importarlo.

Figura 8. Importazione di un file HAR

Risorse della cache visualizzabili in anteprima nel riquadro Applicazione

Fai clic su una riga in una tabella Cache Storage per visualizzare un'anteprima della risorsa sotto la tabella.

Figura 9. Visualizzazione dell'anteprima di una risorsa cache

Debug della cache più reattivo

In Chrome 61 e versioni precedenti, il debug delle cache create con l'API Cache è... approssimativo. Ad esempio, quando una pagina crea una nuova cache, devi aggiornare manualmente la pagina o DevTools per visualizzarla.

In Chrome 62, la scheda Memoria cache ora si aggiorna in tempo reale ogni volta che crei, aggiorni o elimini una cache o una risorsa. Guarda il video qui sotto per un esempio.

Guarda la demo dello spazio di archiviazione della cache per provarlo.

Copertura del codice a livello di blocco

In Chrome 61 e versioni precedenti, la scheda Copertura contrassegna tutto il codice all'interno di una funzione come utilizzato, a condizione che la funzione venga chiamata.

Figura 10. Un esempio della scheda Copertura in Chrome 61. La riga 4 è contrassegnata come utilizzata, anche se non viene mai eseguita

A partire da Chrome 62, la scheda Copertura indica quale codice all'interno di una funzione viene chiamato.

Figura 11. Un esempio della scheda Copertura in Chrome 62. La riga 4 è contrassegnata come inutilizzata

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.

• Inviaci feedback e richieste di funzionalità all'indirizzo crbug.com.
• Segnala un problema DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento 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.