Novità di DevTools (Chrome 70)

Kayce Basques

Siamo felici di rivederti. Sono trascorse circa 12 settimane dal nostro ultimo aggiornamento, relativo a Chrome 68. Abbiamo saltato Chrome 69 perché non avevamo abbastanza nuove funzionalità o modifiche all'interfaccia utente da giustificare un 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 sul rendimento.
• Debug più affidabile.
• Attiva la limitazione della rete dal menu dei comandi.
• Completa automaticamente i punti di interruzione condizionali.
• 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

Blocca un'espressione dinamica nella parte superiore della console quando vuoi monitorarne il valore in tempo reale.

1. Fai clic su Crea espressione dal vivo . Si apre l'interfaccia utente di Live Expression.

   

   Figura 1. Interfaccia utente di Live Expression

2. Digita l'espressione che vuoi monitorare.

   

   Figura 2. Digitare Date.now() nell'interfaccia utente di Live Expression

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

Evidenzia i nodi DOM durante la valutazione eager

Digita un'espressione che restituisca un nodo DOM nella console e la valutazione anticipata ora evidenzi quel nodo nell'area visibile.

Figura 4. Poiché l'espressione corrente restituisce un nodo, questo viene evidenziato nel visualizzatore

Ecco alcune espressioni che potresti trovare utili:

• document.activeElement per evidenziare il nodo attualmente attivo.
• document.querySelector(s) per evidenziare un nodo arbitrario, dove s è un selettore CSS. È equivalente al passaggio del mouse sopra un nodo nell'albero DOM.
• $0 per evidenziare il nodo attualmente selezionato nell'albero DOM.
• $0.parentElement per evidenziare il nodo principale del nodo attualmente selezionato.

Ottimizzazioni del riquadro sul rendimento

In precedenza, quando si creava il profilo di una pagina di grandi dimensioni, il riquadro Rendimento impiegava decine di secondi per elaborare e visualizzare i dati. A volte, anche il caricamento di un evento dopo aver fatto clic per visualizzare ulteriori informazioni nella scheda Riepilogo richiedeva diversi 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 il mancato azionamento dei punti di interruzione.

Corregge inoltre i bug relativi alle mappe di origine. Alcuni utenti di TypeScript chiedevano a DevTools di ignorare un determinato file TypeScript durante l'esplorazione del codice, ma DevTools ignorava l'intero file JavaScript aggregato. Queste correzioni risolvono anche un problema che causava la lentezza del riquadro Origini.

Attivare la limitazione della rete dal menu di comando

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

Figura 6. Comandi di limitazione della larghezza di banda della rete nel menu dei comandi

Punti di interruzione condizionali di completamento automatico

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

Figura 7. Interfaccia utente del completamento automatico

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

Interrompi su eventi AudioContext

Utilizza il riquadro Punti di interruzione listener di eventi per mettere in pausa la 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.

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

Esegui il debug delle app Node.js con ndb

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

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

Figura 9. Interfaccia utente di ndb

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

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

Vuoi misurare il tempo necessario agli utenti reali per completare percorsi critici sulle tue pagine? Valuta la possibilità di instrumentare il codice con l'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 (CTA). Innanzitutto, devi contrassegnare l'inizio del percorso in un gestore eventi associato a un evento di caricamento pagina, ad esempio DOMContentLoaded:

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

Poi, quando fai clic sul pulsante, contrassegna la fine del viaggio e calcola la relativa durata:

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

Puoi anche estrarre le misurazioni, in modo da inviarle facilmente 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.

Figura 10. La sezione Tempi utente

È 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. React esegue questa operazione 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 funzionalità più recenti di DevTools, di testare API di piattaforme web all'avanguardia e di trovare i problemi sul tuo sito prima che lo facciano gli utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere di nuove funzionalità, aggiornamenti o 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 all'account @ChromeDevTools.
• Lascia commenti sulle novità nei video di YouTube di DevTools o sui video di YouTube con i suggerimenti per gli strumenti per sviluppatori.

Novità di DevTools

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