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 le modifiche principali che verranno introdotte in DevTools in Chrome 70 includono:

• Espressioni dal vivo nella console.
• Evidenzia i nodi DOM durante la valutazione eager.
• Ottimizzazioni del riquadro sul rendimento.
• Debug più affidabile.
• Attiva la limitazione della rete dal menu di comando.
• Completa automaticamente i punti di interruzione condizionali.
• Esegui un'interruzione in base agli eventi AudioContext.
• Esegui 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 dell'espressione dal vivo per salvarla.

   

   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 Strumenti per sviluppatori di ignorare un determinato file TypeScript durante l'esplorazione del codice, ma Strumenti per sviluppatori ignorava l'intero file JavaScript aggregato. Queste correzioni risolvono anche un problema che causava in genere un rallentamento del riquadro Origini.

Attivare la limitazione della rete dal menu di comando

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

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

Completare automaticamente i punti di interruzione condizionali

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? L'interfaccia utente del 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 attacco ai processi secondari.
• È necessario inserire i punti di interruzione prima dei moduli.
• Modifica dei file all'interno dell'interfaccia utente di DevTools.
• Per impostazione predefinita, vengono ignorati tutti gli script esterni alla directory di lavoro corrente.

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 nelle 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 contrassegna automaticamente le misurazioni di User Timing nella sezione User Timing delle registrazioni delle prestazioni.

Figura 10. La sezione Tempi utente

Questo è utile anche per 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 di anteprima

Valuta la possibilità di utilizzare 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 i tuoi 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 DevTools utilizzando more_vert Altre opzioni > Guida > Segnala un problema DevTools in DevTools.
• Invia un tweet all'account @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti per DevTools.

Novità di DevTools

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