Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 62)

Kayce Basques

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

Supporto per gli 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 della console per l'esecuzione di query sugli oggetti.
Filtri per esclusione e Filtri URL nella console.
Importazioni HAR nel riquadro Rete.
Risorse cache visualizzabili in anteprima.
Debug della cache più prevedibile.
Copertura dei codici a livello di blocco.

Nota: puoi controllare quale versione di Chrome è in uso sul sito chrome://version. Chrome si aggiorna automaticamente a una nuova versione principale ogni sei settimane circa.

Operatori di attesa di primo livello nella console

La console ora supporta gli operatori await di primo livello.

Utilizzo degli operatori attesa di primo livello nella console

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

Nuovi flussi di lavoro per 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:

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

Acquisire uno screenshot di una parte dell'area visibile

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

Screenshot di nodi HTML specifici

Per acquisire uno screenshot di un nodo HTML specifico:

Seleziona un elemento nel riquadro Elementi.

Figura 3. In questo esempio, l'obiettivo è acquisire uno screenshot dell'intestazione blu che contenga il testo Tools. Tieni presente che questo nodo è già selezionato nell'albero DOM del riquadro Elementi.
Apri il menu Comando.
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 intorno a ogni elemento della griglia. Funziona solo quando all'elemento selezionato, o all'elemento principale dell'elemento selezionato, è applicato display:grid.

Mettere in evidenza una griglia CSS

Figura 5. Mettere in evidenza una griglia CSS

Guarda il video di seguito per apprendere le nozioni di base della griglia CSS 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 Selezionare il contesto di esecuzione.

Nuovi filtri della console

La console ora supporta i filtri per URL e esclusione.

Filtri per esclusione

Digita -<text> nella casella Filtro per filtrare qualsiasi messaggio della console che include <text>.

Esempio di 3 messaggi che verranno filtrati

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 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 che hanno avuto origine da uno script il cui URL include <text>.

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

Esempio di filtro degli URL

Figura 7. Utilizzo dei filtri degli URL per visualizzare solo i messaggi che hanno origine da script il cui URL include hymn. Passa il mouse sopra il nome dello script per vedere che il nome host include questo testo.

Importazioni HAR nel riquadro Rete

Trascina un file HAR nel riquadro Rete per importarlo.

Importazione di un file HAR

Figura 8. Importazione di un file HAR

Risorse cache visualizzabili in anteprima nel riquadro Applicazione

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

Anteprima di una risorsa cache

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 non è complicato. Ad esempio, quando una pagina crea una nuova cache, per visualizzarla devi aggiornare manualmente la pagina o DevTools.

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

Per una prova in autonomia, consulta la demo dell'archiviazione cache.

Copertura codice a livello di blocco

In Chrome 61 e versioni precedenti, la scheda Copertura contrassegna tutto il codice di una funzione come utilizzato, purché la funzione venga chiamata.

Un esempio della scheda Copertura in Chrome 61

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

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

Un esempio della scheda Copertura in Chrome 62

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

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

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

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.