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, relativo a Chrome 68. Abbiamo saltato Chrome 69 perché non avevamo abbastanza nuove funzionalità o modifiche alla UI da pubblicare.

Le nuove funzionalità e i principali cambiamenti che verranno introdotti 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 Comando.
Punti di interruzione condizionali con completamento automatico.
Interrompi durante AudioContext eventi.
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 dal vivo nella parte superiore della console quando vuoi monitorarne il valore in tempo reale.

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

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

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

Figura 3. Un'espressione dal vivo salvata

I valori dell'espressione in tempo reale vengono aggiornati ogni 250 millisecondi.

Evidenziare i nodi DOM durante la valutazione Eager

Digita un'espressione che valuta un nodo DOM nella console e la valutazione Eager ora evidenzia quel nodo nell'area visibile.

Nota:il nodo evidenziato si aggiorna solo durante la digitazione. Non si aggiorna a intervalli. Ad esempio, se digiti document.activeElement per monitorare l'elemento attivo e poi scorri la pagina, DevTools continuerà a evidenziare il nodo che era attivo quando hai digitato inizialmente l'espressione.

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

Figura 4. Poiché l'espressione corrente restituisce un nodo, questo viene evidenziato nell'area visibile

Di seguito sono riportate 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 al passaggio del mouse sopra un nodo nell'albero DOM.
$0 per evidenziare qualsiasi nodo attualmente selezionato nell'albero DOM.
$0.parentElement per evidenziare il nodo padre del nodo attualmente selezionato.

Ottimizzazioni del riquadro del rendimento

Durante la profilazione di una pagina di grandi dimensioni, in precedenza il riquadro Rendimento impiegava decine di secondi per elaborare e visualizzare i dati. A volte il caricamento di un evento richiedeva anche più secondi per avere ulteriori informazioni nella scheda Riepilogo. 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.

Risolve anche i bug relativi alle mappe di origine. Alcuni utenti di TypeScript indicavano a DevTools di ignorare un determinato file TypeScript mentre eseguivano la scansione del codice e DevTools ignorava l'intero file JavaScript in bundle. Queste correzioni risolvono anche un problema che causava generalmente una lenta esecuzione del riquadro Origini.

Attiva la limitazione della rete dal menu Comando

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

Comandi di limitazione della rete nel menu Comandi.

Figura 6. Comandi di limitazione della rete nel menu Comandi

Punti di interruzione condizionali con completamento automatico

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

L'interfaccia utente di completamento automatico

Figura 7. L'interfaccia utente di completamento automatico

Lo sapevi? L'interfaccia utente di Autocomplete è possibile grazie a CodeMirror, che è alla base anche della console.

Interruzione degli eventi AudioContext

Utilizza il riquadro Punti di interruzione listener di eventi per fare una pausa nella 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 nell'interfaccia utente di DevTools.
Per impostazione predefinita, tutti gli script al di fuori della directory di lavoro corrente vengono ignorati.

UI ndb.

Figura 9. UI ndb

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

Suggerimento extra: misura le interazioni degli utenti del mondo reale con l'API User Timing

Vuoi misurare quanto tempo impiegano gli utenti reali a completare percorsi critici sulle tue pagine? Potresti instrumentare il tuo codice con l'API User Timing.

Ad esempio, supponi di voler 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');
});

Quindi, devi segnare la fine del percorso e calcolarne la durata quando fai clic sul pulsante:

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

Puoi anche estrarre le misurazioni, inviandole 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.

La sezione Tempi utenti.

Figura 10. La sezione Tempi utenti

Questo è utile anche durante 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.

Scarica 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à di DevTools più recenti, di testare le API per piattaforme web all'avanguardia e di individuare eventuali problemi sul tuo sito prima che lo facciano gli utenti.

Contattare il team di Chrome DevTools

Utilizza le opzioni seguenti per discutere delle nuove funzionalità e delle modifiche nel post o di qualsiasi altra cosa relativa a DevTools.

Inviaci un suggerimento o un feedback tramite crbug.com.
Segnala un problema DevTools utilizzando Altre opzioni > Guida > Segnala i problemi di DevTools in DevTools.
Tweet all'indirizzo @ChromeDevTools.
Lascia commenti sui video di YouTube o sui suggerimenti di DevTools in DevTools Video di YouTube.