Novità di DevTools (Chrome 62)

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

• Supporto per 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 l'esecuzione di 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.

di Gemini Advanced.

Operatori di attesa di primo livello nella console

La console ora supporta gli operatori await di primo livello.

Figura 1. Utilizzare gli 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 acquisire uno screenshot di una parte dell'area visibile:

1. Fai clic su Ispeziona o premi Comando+Maiusc+C (Mac) oppure Ctrl+Maiusc+C (Windows, Linux) per attivare la modalità Ispeziona elemento.
2. Tieni premuto Comando (Mac) o Ctrl (Windows, Linux) e seleziona la parte di l'area visibile di cui vuoi acquisire uno screenshot.
3. Rilascia il mouse. DevTools scarica uno screenshot della parte selezionata.

Figura 2. Acquisire 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 che contiene il testo Tools. Nota che questo nodo è già selezionato nell'albero DOM della Riquadro Elementi

2. Apri il menu dei comandi.

3. Inizia a digitare node e seleziona Capture node screenshot. DevTools scarica uno screenshot dell' 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 dell' Riquadro Elementi. Intorno a ciascuno degli elementi della griglia viene visualizzato un bordo tratteggiato. Funziona solo quando all'elemento selezionato o all'elemento principale dell'elemento selezionato con display:grid applicato.

Figura 5. Evidenziazione di 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 l'esecuzione di query sugli oggetti heap

Chiama queryObjects(Constructor) dalla console per restituire un array di oggetti che sono stati 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 per i quali è 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 per esclusione e URL.

Filtri per esclusione

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é nella casella Filtro è stato inserito -two

DevTools filtra un messaggio se viene trovato <text>:

• Nel testo del messaggio.
• Nel nome file da cui ha avuto origine il messaggio.
• Nel testo dell'analisi dello stack.

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

Filtri URL

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

Il filtro utilizza la corrispondenza parziale. Se <text> compare in un punto qualsiasi dell'URL, DevTools mostra la per creare un nuovo messaggio email.

Figura 7. Utilizzo di filtri URL per visualizzare solo i messaggi provenienti da script il cui URL include hymn. Passando il mouse sopra il nome dello script, puoi vedere che il nome host include

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 Archiviazione cache per visualizzare un'anteprima della risorsa sotto la tabella.

Figura 9. 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. Per Ad esempio, quando una pagina crea una nuova cache, devi aggiornare manualmente la pagina o DevTools per ordinare per vedere la nuova cache.

In Chrome 62, la scheda Spazio di archiviazione cache ora si aggiorna in tempo reale ogni volta che crei, aggiorni svuotare una cache o eliminare una risorsa. Per un esempio, guarda il video qui sotto.

Vedi la demo dello spazio di archiviazione cache per provarla in autonomia.

Copertura del codice a livello di blocco

In Chrome 61 e versioni precedenti, la scheda Copertura contrassegna come utilizzato tutto il codice all'interno di una funzione. solo se la funzione viene chiamata.

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

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

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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e individuare i problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità e modifiche nel post o di qualsiasi altra informazione relativa a DevTools.

• Inviaci un suggerimento o un feedback tramite crbug.com.
• Segnala un problema di DevTools utilizzando Altre opzioni   > Guida > Segnala un problema di DevTools in DevTools.
• Invia un tweet all'indirizzo @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o nei video di YouTube dei suggerimenti di DevTools.

Novità di DevTools

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