Novità di DevTools (Chrome 62)

Kayce Basques

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

Operatori di attesa di primo livello nella console

La console ora supporta gli operatori await di primo livello.

Usare gli operatori di attesa di primo livello nella console

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 Ispeziona o premi Comando+Maiusc+C (Mac) o Ctrl+Maiusc+C (Windows, Linux) per attivare la modalità Ispeziona elemento.
  2. Tieni premuto Comando (Mac) o Ctrl (Windows, Linux) e seleziona la parte dell'area visibile di cui vuoi acquisire uno screenshot.
  3. Rilascia il mouse. DevTools scarica uno screenshot della parte selezionata.

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 fare uno screenshot di un nodo HTML specifico:

  1. Seleziona un elemento nel riquadro Elementi.

    Un esempio di nodo

    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 nell'albero 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.

    Il risultato del comando "Acquisisci screenshot del nodo"

    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 nella Struttura DOM del riquadro Elementi. Intorno a ciascuno degli elementi della griglia viene visualizzato un bordo tratteggiato. Questa operazione funziona solo quando all'elemento selezionato o all'elemento principale dell'elemento selezionato è applicato display:grid.

Evidenziazione di una griglia CSS

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

Richiama 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 per 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 esclusione e URL.

Filtri per esclusione

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

Esempio di 3 messaggi che verranno filtrati

Figura 6. La prima istruzione registra one, two, three e four nella console. two è nascosto perché hai inserito -two 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 provenienti da uno script il cui URL include <text>.

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

Esempio di filtro degli URL

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.

Importazione di un file HAR

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.

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

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. 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, purché la funzione venga chiamata.

Esempio della scheda Copertura in Chrome 61

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 il codice chiamato all'interno di una funzione.

Esempio della scheda Copertura in Chrome 62

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 ultime funzionalità di DevTools, di testare le API delle piattaforme web all'avanguardia e di 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 usando Altre opzioni   Altre   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome - Guida introduttiva

Chrome - Guida introduttiva

Guida introduttiva di Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 è stato annullato.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59