Hallo! Sono di nuovo Kayce, autore di tecnologie per DevTools. Per questa sintesi DevTools ho pensato di cambiarlo un po' e di fare un riepilogo di alcuni miglioramenti degli strumenti perf in DevTools nelle ultime release di Chrome.
Tutte le funzionalità sono già nella versione stabile di Chrome, se non diversamente specificato.
Limitazione della CPU per un mondo mobile-first
Disponibile in Chrome 54, attualmente Canary.
Il software mangia il mondo e i dispositivi mobili si mangiano software. DevTools si sta evolvendo costantemente per soddisfare meglio le esigenze di un mondo di sviluppo incentrato sui dispositivi mobili. L'ultimo sviluppo degli strumenti mobile-first di DevTools è la limitazione della CPU. Utilizza questa funzionalità per conoscere meglio le prestazioni del tuo sito sui dispositivi con risorse limitate.
Seleziona una delle opzioni dal menu a discesa Limitazione CPU nel riquadro Sequenza temporale per ridurre la potenza di calcolo della tua macchina di sviluppo.
Alcune note sulla limitazione della CPU:
- La limitazione viene applicata immediatamente e continua fino a quando non la disabiliti, proprio come faresti con la limitazione della rete.
- Questa funzionalità consente di conoscere in generale le prestazioni potenziali del sito su un dispositivo con risorse limitate. È impossibile per DevTools emulare effettivamente le caratteristiche delle prestazioni di un system on chip per dispositivi mobili.
- La limitazione dipende dalla tua macchina di sviluppo. In altre parole, una limitazione 5 volte superiore su un computer desktop all'avanguardia produrrà risultati diversi rispetto a una limitazione 5 volte superiore su un laptop economico di cinque anni.
Combina la limitazione della CPU con la limitazione della rete e la modalità dispositivo per ottenere un quadro molto migliore dell'aspetto e delle prestazioni del tuo sito sui dispositivi mobili, direttamente dal browser del tuo computer di sviluppo.
Visualizzazione rete nelle registrazioni cronologiche
Attiva la casella di controllo Rete la prossima volta che registri una cronologia per analizzare il modo in cui la pagina ha scaricato le risorse. Fai clic su una risorsa per visualizzarne di più nel riquadro Riepilogo.
Il campo Iniziatore nel riepilogo è particolarmente utile. Questo campo indica dove viene richiesta la risorsa.
Listener di eventi passivi
I listener di eventi passivi sono uno standard emergente per migliorare le prestazioni di scorrimento. Leggi questo articolo per saperne di più:
Migliorare le prestazioni di scorrimento con i listener di eventi passivi
DevTools ha fornito un paio di funzionalità per aiutarti a trovare ascoltatori che potrebbero trarre vantaggio da un po' di amore per {passive: true}.
Innanzitutto, la console emette un avviso quando un listener sincrono blocca lo scorrimento delle pagine per periodi di tempo irragionevoli.
Puoi verificarlo personalmente nella demo di seguito:
Dati di scorrimento relativi alla demo dei gestori touch/wheel
Puoi quindi utilizzare il piccolo menu a discesa nel riquadro Listener di eventi per filtrare i listener in base ai listener passivi o di blocco.
Infine, puoi attivare o disattivare lo stato passivo o di blocco di un listener passando il mouse sopra e premendo Attiva/disattiva passivo. Questa funzionalità è attualmente limitata ai listener di eventi touchstart, touchmove, mousewheel e wheel.
Concludo questa sezione con un piccolo suggerimento. Attiva la casella di controllo Problemi di rendimento relativi allo scorrimento nel riquadro a scomparsa Rendering per ottenere una rappresentazione visiva dei potenziali problemi di scorrimento. Quando una sezione di una pagina è evidenziata, significa che esiste un listener associato a quella sezione della pagina che potrebbe influire negativamente sulle prestazioni dello scorrimento.
Raggruppa per attività
A metà giugno, nel riquadro Struttura ad albero delle chiamate nel riquadro Spostamenti è stata aggiunta una nuova categoria di ordinamento: Raggruppa per attività. Questo raggruppamento ti consente di visualizzare il tempo trascorso dalla pagina ad analizzare il codice HTML, valutare gli script, colorare e così via.
Statistiche della cronologia nel riquadro delle fonti
Crea una registrazione della cronologia con l'opzione Profilo JS attivata. Nel riquadro Origini potrai vedere un'analisi dettagliata dei tempi di esecuzione.
Condividi il tuo punto di vista
Come sempre, ci piacerebbe ricevere il tuo feedback o le tue idee su qualsiasi argomento relativo a DevTools.
- Invia un ping a ChromeDevTools su Twitter per brevi domande o feedback o per condividere nuove idee.
- Per discussioni più lunghe, la mailing list o Stack Overflow sono le soluzioni migliori.
- Per qualsiasi cosa relativa ai documenti, apri un problema nel nostro repository di documenti.
Al prossimo mese.