Ciao a tutti, nell'ultima edizione del DevTools Digest abbiamo potuto esaminare gli efficaci stack di chiamate asincrone e altri ancora. In questa versione, vedremo un miglioramento dei filtri del riquadro della rete (con completamento automatico), la possibilità di modificare i contenuti Shadow DOM, gli aggiornamenti di CodeMirror 4 e altro ancora.
Filtri del riquadro Rete
Ora puoi filtrare le risorse in base a determinati campi, come Dominio. Un formato di filtro è il seguente: Domain:website.com. Oltre ai filtri, vengono visualizzati anche suggerimenti di completamento automatico per i valori di filtro validi, che si aggiornano in tempo reale durante la digitazione della query. Può essere utile quando devi trovare tutte le risorse gestite da un determinato dominio. [crbubg.com/258421]
Modificare i contenuti del DOM ombra
DevTools ha sempre potuto modificare il codice HTML normale nel riquadro Elementi. Ora queste funzionalità si estendono agli elementi che fanno parte di un DOM ombra. [crbug.com/348991]
Eseguire l'upgrade a CodeMirror 4.0
È stato eseguito l'upgrade a CodeMirror 4, l'editor di testo basato su JavaScript utilizzato nel riquadro Origini. Di conseguenza, sono state aggiunte una serie di nuove funzionalità. crbug.com/356878]
Ricerca rapida di una proprietà CSS
Ora puoi cercare nomi di proprietà, valori o selettori di regole dalla nuova casella di ricerca nel riquadro Stili. I risultati vengono evidenziati in tempo reale durante la digitazione della query. [crbug.com/278852]
Timestamp accanto ai messaggi della console
Quando registri i messaggi in rapida successione, può essere utile vedere l'ora esatta in cui viene registrato un messaggio. Puoi attivarla tramite gli esperimenti di DevTools. [crbug.com/131714]
Suddivisione delle statistiche di memoria per gli snapshot dell'heap
Quando visualizzi un'istantanea dell'heap registrata, puoi notare il grafico a torta delle statistiche che offre una panoramica visiva, codificata per colore, di quale aspetto di JavaScript sta consumando più memoria. Al momento è una funzionalità sperimentale. Attiva "Statistiche istantanee dell'heap" per provarla. [crbug.com/346335]
Visualizza il codice sorgente originale di un messaggio console.log, non la versione con wrapping
Probabilmente hai una funzione di wrapper console.log, ma purtroppo in console tutti i messaggi provengono da qualcosa come util.js:46. Ora puoi chiedere a DevTools di risolvere le posizioni originali. Inserisci il file che aggrega i messaggi di log della console nella casella di immissione "Salta il passaggio attraverso le origini con nomi specifici" per fare in modo che DevTools lo attivi nella blackbox e poi visualizzi la vera origine di un'istruzione di log. [crbug.com/231007]
Altre piccole ma efficaci aggiunte
Aggiorna il riquadro Listener di eventi nel riquadro Elementi dopo aver aggiunto o rimosso dinamicamente i listener di eventi JavaScript. [crbug.com/341044]
Puoi utilizzare
Ctrl+per dare il focus all'input della console. Questa opzione può essere utile per un flusso di lavoro solo con tastiera in DevTools. [crbug.com/144943]I suggerimenti di completamento automatico per border-style per i valori (dotted, dashed, double, groove) sono stati aggiornati in modo da corrispondere alle specifiche. [crbug.com/349998]
Il pulsante Ripristina impostazioni predefinite e ricarica **è stato aggiunto al riquadro Impostazioni che fa esattamente ciò che è indicato sul barattolo. [crbug.com/135451]
Attualmente è una funzionalità sperimentale, ma puoi provare l'opzione Aggancia a sinistra per scoprire se è adatta al tuo flusso di lavoro. Le altre modalità di layout sono aggancia alla finestra principale (a destra o in basso) e sgancia in una finestra separata. [crbug.com/134282]
"wheel" è ora disponibile come breakpoint del listener di eventi, oltre ai consueti eventi click, mousemove, mousedown e così via. [crbug.com/347562]
Per il momento è tutto. Grazie per l'attenzione.