Novità di DevTools (Chrome 70)

Kayce Basques

Siamo felici di rivederti. Sono passate 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 da giustificare un post.

Le nuove funzionalità e le modifiche principali in arrivo in DevTools in Chrome 70 includono:

• Espressioni live nella console.
• Evidenzia i nodi DOM durante la valutazione eager.
• Ottimizzazioni del pannello del rendimento.
• Debug più affidabile.
• Attiva la limitazione della rete dal menu Comando.
• Completamento automatico dei punti di interruzione condizionali.
• Interrompi la riproduzione in corrispondenza degli eventi AudioContext.
• Eseguire il debug delle app Node.js con ndb.
• Suggerimento bonus: misura le interazioni reali degli utenti con l'API User Timing.

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

Espressioni live nella console

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

1. Fai clic su Crea espressione live . Si apre l'interfaccia utente Live Expression.

   

   Figura 1. L'interfaccia utente di Live Expression

2. Digita l'espressione che vuoi monitorare.

   

   Figura 2. Digitazione di Date.now() nell'interfaccia utente dell'espressione live

3. Fai clic all'esterno dell'interfaccia utente di Live Expression per salvare l'espressione.

   

   Figura 3. Un'espressione live salvata

I valori di Live Expression vengono aggiornati ogni 250 millisecondi.

Evidenzia i nodi DOM durante la valutazione eager

Digita un'espressione che restituisce un nodo DOM nella console e la valutazione eager ora evidenzia il nodo nel riquadro.

Figura 4. Poiché l'espressione attuale restituisce un nodo, questo viene evidenziato nella finestra

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. Questa operazione equivale a passare il mouse sopra un nodo nell'albero DOM.
• $0 per evidenziare il nodo attualmente selezionato nell'albero DOM.
• $0.parentElement per evidenziare l'elemento principale del nodo attualmente selezionato.

Ottimizzazioni del pannello del rendimento

Quando si profilava una pagina di grandi dimensioni, il riquadro Rendimento impiegava decine di secondi per elaborare e visualizzare i dati. A volte, fare clic su un evento per saperne di più nella scheda Riepilogo richiedeva diversi secondi per il caricamento. 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 attivamento dei punti di interruzione.

Inoltre, corregge i bug relativi alle mappe di origine. Alcuni utenti di TypeScript chiedevano a DevTools di ignorare un determinato file TypeScript durante l'esecuzione del codice, mentre DevTools ignorava l'intero file JavaScript in bundle. Queste correzioni risolvono anche un problema che causava un rallentamento generale del pannello Sources.

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

Completamento automatico dei punti di interruzione condizionali

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

Figura 7. L'interfaccia utente del completamento automatico

Lo sapevi? L'interfaccia utente di completamento automatico è possibile grazie a CodeMirror, che alimenta anche la console.

Interrompi in corrispondenza degli 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

Eseguire il debug delle app Node.js con ndb

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

• Rilevamento e collegamento ai processi secondari.
• È necessario inserire i punti di interruzione prima dei moduli.
• Modifica dei file all'interno della UI di DevTools.
• Per impostazione predefinita, vengono ignorati tutti gli script al di fuori della directory di lavoro corrente.

Figura 9. L'interfaccia utente di ndb

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

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

Vuoi misurare il tempo necessario agli utenti reali per completare i 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). Per prima cosa, 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');
});

Quindi, contrassegnerai la fine del viaggio e ne calcolerai la durata quando viene fatto 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 aggregati e anonimi:

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

DevTools contrassegna automaticamente le misurazioni User Timing nella sezione User Timing delle registrazioni delle prestazioni.

Figura 10. La sezione Tempi utente

Ciò è 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 lo fa 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, testare le API della piattaforma web all'avanguardia e trovare problemi sul tuo sito prima che lo facciano i tuoi utenti.

Contatta il team di Chrome DevTools

Utilizza le seguenti opzioni per discutere delle nuove funzionalità, degli aggiornamenti o di 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 a @ChromeDevTools.
• Lascia un commento sui video di YouTube Novità di DevTools o sui video di YouTube Suggerimenti di DevTools.

Novità di DevTools

Un elenco di tutti gli argomenti trattati nella serie Novità di DevTools.