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.

1. Fai clic su Crea espressione dal vivo. . Live streaming Si apre la UI delle espressioni.

   

   Figura 1. UI dell'espressione live

2. Digita l'espressione che vuoi monitorare.

   

   Figura 2. Digita Date.now() nell'UI di Espressione dal vivo

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.

Evidenziare i nodi DOM durante la valutazione Eager

Digita un'espressione che restituisca un nodo DOM nella console e in Valutazione eager ora evidenzia quel nodo nell'area visibile.

Figura 4. Poiché l'espressione corrente restituisce un nodo, quest'ultimo è evidenziato nella 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. Questo 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 l'elaborazione del riquadro Prestazioni richiedeva decine di secondi. per visualizzare i dati. Facendo clic su un evento per scoprire di più al riguardo nella scheda Riepilogo, a volte il caricamento ha richiesto 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 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; DevTools invece ignora l'intero file JavaScript in bundle. Queste correzioni risolvono anche un problema che causava il riquadro Origini a funzionare in genere lentamente.

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.

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.

Figura 7. UI del completamento automatico

Lo sapevi? La UI di Autocomplete è possibile grazie a CodeMirror, che è alla base anche della Google Cloud.

Interrompi eventi AudioContext

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

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

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 della UI di DevTools.
• Tutti gli script esterni alla directory di lavoro corrente vengono ignorati per impostazione predefinita.

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? Prendi in considerazione 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. il pulsante di invito all'azione. Per prima cosa, contrassegneresti l'inizio del percorso in una 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 del tuo Registrazioni delle esibizioni.

Figura 10. La sezione Tempi utente

È utile anche per eseguire il debug o l'ottimizzazione del codice. Ad esempio, se vuoi ottimizzare una specifica fase del ciclo di vita, chiama window.performance.mark() all'inizio e alla fine durante il 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 in anteprima ti consentono di accedere alle funzionalità più recenti di DevTools, testare le API delle piattaforme web all'avanguardia e 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 utilizzando 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.

Novità di DevTools

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