Novità di DevTools (Chrome 62)

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

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

Operatori await di primo livello nella console

La console ora supporta gli operatori await di primo livello.

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

Nuovi workflow per gli screenshot

Ora puoi acquisire uno screenshot di una parte della finestra o di un nodo HTML specifico.

Screenshot di una parte del riquadro visibile

Per acquisire uno screenshot di una parte del riquadro di visualizzazione:

1. Fai clic su Ispeziona o premi Comando+Maiusc+C (Mac) o Ctrl+Maiusc+C (Windows, Linux) per attivare la modalità Ispeziona elemento.
2. Tieni premuto Command (Mac) o Control (Windows, Linux) e seleziona la porzione del riquadro che vuoi acquisire.
3. Rilascia il mouse. DevTools scarica uno screenshot della porzione selezionata.

Figura 2. Acquisizione di uno screenshot di una parte del riquadro

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 che contiene il testo Tools. Tieni presente che questo nodo è già selezionato nella struttura 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 influisce su un elemento, passa il mouse sopra un elemento nell'albero DOM del riquadro Elementi. Un bordo tratteggiato viene visualizzato intorno a ciascun elemento della griglia. Funziona solo quando l'elemento selezionato o il relativo elemento principale ha display:grid applicato.

Figura 5. Evidenziare una griglia CSS

Guarda il video qui sotto per scoprire 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 promesse.
• queryObjects(HTMLElement). Restituisce tutti gli elementi HTML.
• queryObjects(foo), dove foo è il nome di una funzione. Restituisce tutti gli oggetti di cui è stata creata un'istanza tramite new foo().

L'ambito di queryObjects() è il contesto di esecuzione attualmente selezionato nella console. Consulta Selezione del contesto di esecuzione.

Nuovi filtri della console

La console ora supporta i filtri negativi e per URL.

Filtri negativi

Digita -<text> nella casella Filtro per filtrare 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 è stato 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 dello stack trace.

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

Filtri URL

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

Il filtro utilizza la corrispondenza parziale. Se <text> viene visualizzato 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 host include questo testo

Importazioni HAR nel riquadro Network

Trascina un file HAR nel riquadro Rete per importarlo.

Figura 8. Importazione di un file HAR

Risorse della cache visualizzabili nel riquadro Applicazione

Fai clic su una riga di una tabella Archiviazione cache per visualizzare un'anteprima della risorsa sotto la tabella.

Figura 9. Visualizzazione dell'anteprima di una risorsa della cache

Debug della cache più reattivo

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

In Chrome 62, la scheda Cache Storage 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.

Per provarlo, consulta la demo dello spazio di archiviazione della cache.

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 ora 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 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.

• 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 un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

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