Questa pagina è stata tradotta dall'API Cloud Translation.

Novità di DevTools (Chrome 70)

Kayce Basques

Siamo felici di rivederti. Sono trascorse circa 12 settimane dal nostro ultimo aggiornamento, che riguardava Chrome 68. Abbiamo saltato Chrome 69 perché non avevamo abbastanza nuove funzionalità o modifiche all'interfaccia utente per giustificare la pubblicazione di post.

Le nuove funzionalità e i cambiamenti principali in arrivo per DevTools in Chrome 70 includono:

Espressioni dal vivo nella console.
Evidenziare i nodi DOM durante la valutazione Eager.
Ottimizzazioni del riquadro del rendimento.
Debug più affidabile.
Attiva la limitazione della rete dal menu dei comandi.
Punti di interruzione condizionali di completamento automatico.
Interruzione in corrispondenza di AudioContext eventi.
Eseguire il debug delle app Node.js con ndb.
Suggerimento extra: misura le interazioni degli utenti reali con l'API User Timing.

Continua a leggere o guarda la versione video di questo documento:

Espressioni dal vivo nella console

Fissa un'espressione dal vivo nella parte superiore della Console quando vuoi monitorarne il valore in tempo reale.

Fai clic su Crea espressione dal vivo . Si apre la UI di Live Expression.

Figura 1. UI dell'espressione live
Digita l'espressione che vuoi monitorare.

Figura 2. Digita Date.now() nell'UI di Espressione dal vivo
Fai clic all'esterno dell'interfaccia utente di Espressione dal vivo per salvare l'espressione.

Figura 3. Un'espressione dal vivo salvata

I valori delle espressioni in tempo reale vengono aggiornati ogni 250 millisecondi.

Evidenziare i nodi DOM durante la valutazione Eager

Digita un'espressione che restituisce un nodo DOM nella console e ora Valutazione eager evidenzia tale nodo nell'area visibile.

Nota: il nodo evidenziato si aggiorna solo quando digiti. Non si aggiorna su un intervallo. Ad esempio, se digiti document.activeElement, che monitora l'elemento attivo e poi premi Tab per tutta la pagina, DevTools evidenzia comunque il nodo attivo quando hai digitato inizialmente l'espressione.

Dopo aver digitato document.activeElement nella console, nell'area visibile viene evidenziato un nodo.

Figura 4. Poiché l'espressione corrente restituisce un nodo, quest'ultimo è evidenziato nell'area visibile

Ecco alcune espressioni che potrebbero esserti utili:

document.activeElement per evidenziare il nodo attualmente attivo.
document.querySelector(s) per evidenziare un nodo arbitrario, dove s è un selettore CSS. Equivale a passare il mouse sopra un nodo nell'albero DOM.
$0 per evidenziare qualsiasi nodo attualmente selezionato nell'albero DOM.
$0.parentElement per evidenziare il nodo principale del nodo attualmente selezionato.

Ottimizzazioni del riquadro del rendimento

Durante la profilazione di una pagina di grandi dimensioni, in precedenza il riquadro Prestazioni impiegava decine di secondi per elaborare e visualizzare i dati. Quando fai clic su un evento per saperne di più nella scheda Riepilogo, a volte il caricamento richiedeva più secondi. L'elaborazione e la visualizzazione sono più veloci in Chrome 70.

Figura 5. Elaborazione e caricamento dei dati sul rendimento

Debug più affidabile

Chrome 70 corregge alcuni bug che causavano la scomparsa o la mancata attivazione dei punti di interruzione.

Correggi anche i bug relativi alle mappe di origine. Alcuni utenti di TypeScript indicano a DevTools di ignorare un determinato file TypeScript durante l'esecuzione del codice, mentre DevTools ignora l'intero file JavaScript integrato. Queste correzioni risolvono anche un problema che causava la lentezza del riquadro Origini.

Abilita la limitazione della rete dal menu dei comandi

Ora puoi impostare la limitazione della rete su 3G veloce o 3G lenta dal Menu dei comandi.

Comandi per la limitazione della rete nel menu dei comandi.

Figura 6. Comandi per la limitazione della rete nel menu dei comandi

Punti di interruzione condizionali di completamento automatico

Utilizza l'interfaccia utente del completamento automatico per digitare più rapidamente le espressioni del punto di interruzione condizionale.

UI del completamento automatico

Figura 7. UI del completamento automatico

Lo sapevi? La UI di completamento automatico è possibile grazie a CodeMirror, che è alla base anche della console.

Interruzione in caso di eventi AudioContext

Utilizza il riquadro Punti di interruzione listener di eventi per mettere in pausa sulla prima riga di un gestore di eventi del ciclo di vita AudioContext.

AudioContext fa parte dell'API Web Audio, che puoi utilizzare per elaborare e sintetizzare l'audio.

Eventi AudioContext nel riquadro Punti di interruzione listener di eventi.

Figura 8. Eventi AudioContext nel riquadro Punti di interruzione listener di eventi

Debug delle app Node.js con ndb

ndb è un nuovo debugger per le applicazioni Node.js. Oltre alle consuete funzionalità di debug disponibili tramite DevTools, ndb offre anche:

Rilevamento e collegamento ai processi figlio.
È necessario posizionare i punti di interruzione prima dei moduli.
Modifica dei file all'interno dell'UI di DevTools.
Tutti gli script esterni alla directory di lavoro corrente vengono ignorati per impostazione predefinita.

L'interfaccia utente ndb.

Figura 9. UI di ndb

Per scoprire di più, consulta il file README di ndb.

Suggerimento extra: misura le interazioni degli utenti reali con l'API User Timing

Vuoi misurare quanto tempo impiegano gli utenti reali a completare percorsi critici sulle tue pagine? Valuta la possibilità di dotare il tuo codice dell'API User Timing.

Ad esempio, supponiamo che tu voglia misurare il tempo che un utente trascorre sulla tua home page prima di fare clic sul pulsante di invito all'azione. Innanzitutto, devi contrassegnare l'inizio del percorso in un gestore di eventi associato a un evento di caricamento pagina, come DOMContentLoaded:

document.addEventListener('DOMContentLoaded', () => {
  window.performance.mark('start');
});

Successivamente, dovrai contrassegnare la fine del percorso e calcolarne la durata quando l'utente fa clic sul pulsante:

document.querySelector('#CTA').addEventListener('click', () => {
  window.performance.mark('end');
  window.performance.measure('CTA', 'start', 'end');
});

Puoi anche estrarre le misurazioni, semplificando l'invio al tuo servizio di analisi per raccogliere dati anonimi e aggregati:

const CTA = window.performance.getEntriesByName('CTA')[0].duration;

DevTools esegue automaticamente il markup delle misurazioni del tempo utente nella sezione Tempi utenti delle registrazioni del rendimento.

La sezione Tempi utente.

Figura 10. La sezione Tempi utenti

È utile anche per eseguire il debug o l'ottimizzazione del codice. Ad esempio, se vuoi ottimizzare una determinata fase del ciclo di vita, chiama window.performance.mark() all'inizio e alla fine della funzione del ciclo di vita. Reagisce in modalità di sviluppo.

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