Ciao a tutti, nell'ultima edizione del Digest DevTools abbiamo potuto dare un'occhiata ai potenti stack di chiamate asincrone e ad altri. In questa edizione vedremo un filtro migliorato del Pannello di rete (con completamento automatico), funzionalità di modifica con contenuti Shadow DOM, aggiornamenti di CodeMirror 4 e altro ancora.
Filtro nel riquadro Rete
Ora puoi filtrare le risorse in base a determinati campi, ad esempio Dominio. Un formato di filtro è il seguente: Domain:website.com. Oltre ad applicare i filtri, ricevi anche suggerimenti di completamento automatico per i valori di filtro validi che vengono aggiornati in tempo reale durante la digitazione della query. Potrebbe essere utile quando hai bisogno di trovare tutte le risorse servite da un determinato dominio. [crbubg.com/258421]
Modifica contenuti shadow DOM
DevTools è sempre stato in grado di modificare il codice HTML normale nel riquadro Elementi. Queste funzionalità ora si estendono agli elementi che fanno parte di un DOM Shadow. [crbug.com/348991]
Aggiorna a CodeMirror 4.0
È stato eseguito l'upgrade alla versione 4 di CodeMirror, l'editor di testo basato su JavaScript utilizzato come parte del riquadro delle origini. A seguito di ciò, sono state aggiunte molte nuove funzionalità. crbug.com/356878]
Ricerca rapida di una proprietà CSS
Ora puoi cercare nomi, valori o selettori di regole delle proprietà 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 vengono registrati. Puoi attivare questa funzionalità tramite gli esperimenti DevTools. [crbug.com/131714]
Analisi delle statistiche di memoria per le istantanee heap
Quando visualizzi un'istantanea heap registrata, nota il grafico a torta dei dati statistici che offre una panoramica visiva e codificata per colore degli aspetti di JavaScript che consumano più memoria. Al momento è una funzionalità sperimentale. Per provarla, attiva "Statistiche istantanee heap". [crbug.com/346335]
Visualizza il codice sorgente originale di un console.log, non la versione con wrapping
Probabilmente hai una funzione wrapper in console.log, ma sfortunatamente nella console tutti i tuoi messaggi provengono da qualcosa come util.js:46. Ora puoi fare in modo che DevTools risolva le posizioni originali. Inserisci il file che aggrega i messaggi di log della console nella casella di immissione "Salta passaggio tra origini con nomi particolari" per fare in modo che DevTools non neghi, quindi mostri la vera origine di un'istruzione di log. [crbug.com/231007]
Qualche aggiunta più piccola ma potente
Aggiorna il riquadro Listener di eventi nel riquadro Elementi, dopo aver aggiunto o rimosso in modo dinamico i listener di eventi JavaScript. [crbug.com/341044]
Puoi usare
Ctrl+per concentrarti sull'input della console, che potresti trovare utile per un flusso di lavoro dedicato solo alla tastiera in DevTools. [crbug.com/144943]I suggerimenti di completamento automatico in stile border per i valori (punteggiati, tratteggiati, doppi, groove) sono stati aggiornati in modo da corrispondere alle specifiche. [crbug.com/349998]
Il pulsante Ripristina valori predefiniti e ricarica **è stato aggiunto al riquadro Impostazioni che fa esattamente ciò che è indicato sulla lattina. [crbug.com/135451]
Al momento si tratta di una funzionalità sperimentale, che puoi provare base a sinistra per scoprire se è adatta al tuo flusso di lavoro. Le altre modalità di layout si agganciano alla finestra principale (a destra o in basso) e si sganciano in una finestra separata. [crbug.com/134282]
"wheel" viene ora offerto come punto di interruzione del listener di eventi e si aggiunge ai normali eventi di clic, mousemove, mousedown e così via. [crbug.com/347562]
Per il momento è tutto, grazie per l'attenzione.