Parte due: strumenti per il debug in Visual Studio 2015

Introduzione.
Nel corso del precedente articolo, strumenti per il Debug in Visual Studio 2015, è stata fatta una panoramica di tutti gli strumenti messi a disposizione degli sviluppatori. Siamo partiti analizzando il Diagnostic tool, ovvero la possibilità di eseguire un’analisi completa del consumo di memoria, CPU e risorse che la nostra applicazione richiede per poter funzionare. In questo articolo andremo ad esplorare quella che è una novità, il Timeline Tool.
Timeline Tool.
Si tratta di una vera e propria novità, molto utile soprattutto per un designer, in quanto è tutto interamente dedicato all’interfaccia grafica della nostra applicazione. Fino alla versione RC di Visual Studio 2015 era supportato solo per applicazioni WPF e Windows Store Application. Questo strumento a differenza del Diagnostic Tool non va eseguito in Debug. Una volta avviato, durante l’esecuzione dell’applicazione memorizza diverse tipologie di informazioni tra cui:

Utilizzo thread interfaccia utente in una sequenza temporale
Velocità effettiva elementi visivi (Frame per secondo)

Dettagli sequenza temporale
Riepilogo thread interfaccia utente

Avviare il controllo Timeline Tool.
La procedura è decisamente semplice: avviamo Visual Studio 2015 e apriamo un progetto WPF o Windows Store. Nel mio caso avvio un semplicissimo progetto WPF con un sola Window. Dal menù Debug di Visual Studio, selezioniamo il comando Avvia strumenti di diagnostica senza Debug…, e saremo condotti alla schermata seguente.

Click sul pulsante Inizia e sarà avviata la nostra applicazione; nel frattempo il Timeline Tool registrerà una serie di dati che vedremo e approfondiremo successivamente.

Dalla figura precedente notiamo che è in corso la raccolta dei dati, quando riteniamo di aver eseguito prove sufficienti, possiamo arrestare l’applicazione o mediante il comando con scritta blu “Arrestare la raccolta”, o nel classico modo, con il pulsante in alto a destra della schermata. A questo punto sarà generato un report con file di tipo diagsession come avveniva per il disgnostic tool, ma con dati completamente differenti, come visibile nelle immagini successive.

Nell’immagine precedente, possiamo vedere un anteprima dei dati del report finale. Analizziamoli ora uno ad uno.

Utilizzo thread interfaccia utente in una sequenza temporale.
Comprende: l’”Analisi del codice”, ovvero il lasso di tempo impiegato per eseguire un analisi generale della nostra applicazione, “Layout”, il tempo impiegato per la composizione dell’interfaccia grafica, Rendering, il tempo necessario per visualizzarla e adattare i contenuti nella schermata e nelle differenti risoluzioni, I/O, verifica il tempo impiegato se la nostra applicazione accede al disco o carica e scarica dati dalla rete, codice app, tempo impiegato per l’analisi del codice XAML dell’interfaccia grafica, e infine “Altro XAML”, qualora la nostra applicazione fa uso per esempio di template all’interno di un altro file.

Possiamo come per il diagnostic tool selezionare un lasso di tempo, e automaticamente saranno selezionati i dati per l’arco di tempo da noi scelto.

Velocità effettiva elementi visivi (Frame per secondo).

E’ suddivisa in due sezioni, thread di composizione e thread interfaccia utente, indicando con un valore numerico la quantità di frame al secondo che vengono visualizzati.

Nell’immagine precedente, osserviamo che abbiamo 60 frame per il thread di composizione e 30 per il thread dell’interfaccia utente al secondo.

Dettagli sequenza temporale.

E’ la parte di maggior interesse. Visualizza in maniera testuale e dettagliata in una sequenza temporale, quanto spiegato nella parte “Utilizzo thread interfaccia utente”. La visualizzazione di default è impostata su “Ora di inizio”, questo mediante una combobox dove, possiamo selezionare anche una visualizzazione per “Durata totale”. Possiamo ancora eseguire ulteriori personalizzazioni per la visualizzazione dei dati, esempio “Raggruppare gli eventi di primo livello in base ai frame”, comando posto subito dopo la combobox “Ordina per”. Altra personalizzazione possibile è visualizzare le attività in Background, attività disco e rete, attività dell’interfaccia utente e scenari nella sezione “Configura gli eventi visualizzati nella sequenza temporale”. Possiamo ancora visualizzare i dati per “Durata evento” con due possibili impostazioni, tutto o maggiori a 1 ms. Ma non finisce qui: abbiamo ancora quattro modalità di personalizzazione per la visualizzazione dei dati, nella sezione “Impostazioni di visualizzazione”, tra cui: “Mostra l’indicatore dei thread”, che non fa altro che visualizzare o nascondere le barre rettangolari poste nella finestra “Dettagli sequenza temporale”, “Mostra il qualificatore nel nome di evento”, che corrispondono agli oggetti interessati nella sezione di layout che vedremo poi nelle successive immagini, “Mostra la durata (Automatico) nella sequenza temporale”, ovvero il valore posto subito dopo al tempo di durata totale. Infine abbiamo “Mostra il testo di suggerimento nella sequenza temporale”, ovvero il valore numerico tra parentesi quadre che indica il numero di elementi totale per la parte di layout interessata.

Nell’immagine precedente, abbiamo i dati sul tempo di avvio dell’applicazione, in millisecondi con striscia verde, il tempo di analisi della MainWindow, con rettangolo blu, 6,41 ms. e la quantità di elementi interessati, il rendering e layout. Possiamo, se lo desideriamo, espandere il visual tree, per vedere nel dettaglio tutti i dati al suo interno, come visibile nella figura seguente.

Come detto precedentemente, possiamo visualizzare i dati anche per durata totale, partendo dal tempo di esecuzione maggiore al tempo di esecuzione minore.

Per ciò che riguarda la personalizzazione dei dati, possiamo interagire con i comandi mostrati in figura.

Partendo da sinistra abbiamo:

Visualizzazione per ora o per durata totale con apposita combobox
Raggruppamento degli eventi di primo livello in base ai frame

Configura gli eventi visualizzati nella sequenza temporale
Impostazioni di visualizzazione

Riepilogo thread interfaccia utente.

Si tratta di un classico grafico a torta dove vengono visualizzati con valore in percentuale gli oggetti citati precedentemente.

Conclusione.

In questo secondo articolo, abbiamo esplorato un nuovo tool uscito con Visual Studio 2015, adatto per la visualizzazione dei dati dell’interfaccia grafica della nostra applicazione. Va eseguito senza debug e abbiamo la possibilità di vedere il tutto attraverso una file diagsession che possiamo poi salvare e confrontarlo con altri man mano che sviluppiamo la nostra applicazione. Nel prossimo articolo, esploreremo altre novità introdotte, le PetfTips e i miglioramenti eseguiti sul BreakPoint.

Potresti Leggere: