Visual QML debugging

Oggi trattiamo una tematica è sempre un po’ ostica anche per programmatori esperti di QML: come faccio a sapere dove sono i miei Item su schermo?

Rettangoli, rettangoli, rettangoli!

Quando scriviamo del codice che ha a che fare con oggetti visuali che cambiano posizione o opacità, abbiamo la necessità di sapere dove sono questi oggetti e che dimensioni hanno. In questi casi una tecnica di debug molto semplice, ma più efficace di stampare la posizione dei vari oggetti su console, è quella di inserire un rettangolo colorato all’interno dell’oggetto che vogliamo visualizzare et voilà! Otteniamo una bella macchia colorata che ci indica la posizione del nostro oggetto.

Nel caso in cui la macchia non si veda, possiamo controllare alcune cose:

• verificare che il rettangolo abbia anchors.fill: parent senza altre dimensioni impostate, in modo da escludere che lo strumento di debug sia il bug stesso;
• verificare che l’oggetto sia visibile su schermo, se l’opacity è 0 o la visibility è false non vedremo mai il rettangolo figlio, oppure se l’oggetto parte fuori dallo schermo non lo vedremo mai finché non entrerà all’interno della vista;
• verificare che l’oggetto abbia dimensioni sensate: generalmente questo è il problema, è facile scordarsi di impostare le dimensioni degli oggetti.

È possibile anche impostare l’opacità del rettangolo a qualcosa < 1 nel caso in cui si debbano controllare le posizioni relative di più componenti.

Radiografia dell’applicazione

Se la nostra applicazione è stata sviluppata con Qt Widgets oppure con QtQuick (solo però a partire da Qt 5.2), possiamo sfruttare GammaRay, un software che, data un’applicazione Qt sia essa basata su widget o Qt Quick, permette di analizzare a fondo la struttura degli oggetti. Ecco alcune cose che possiamo visualizzare:

• oggetti istanziati dall’applicazione e le relazioni parent – child che esistono tra quegli oggetti;
• tutti gli oggetti presenti in una scena QtQuick;
• le macchine a stati basate sullo state machine framework in una visualizzazione simile all’UML;
• tutti i modelli creati a partire da QAbstractItemModel;
• tutte le property di ogni QObject, permettendo anche di cambiare al volo i valori assunti.

GammaRay è un’applicazione open source e si può scaricare da GitHub.

Performance e disegno

L’ultima risorsa per analizzare il layout degli oggetti e le performance dell’applicazione è la variabile di ambiente QSG_VISUALIZE. Impostando questa variabile si possono visualizzare vari aspetti legati al renderer QML. L’impostazione più utile quando non sappiamo dove sono gli Item è

QSG_VISUALIZE = overdraw

In questo screenshot vediamo le linee blu che rappresentano la vista QML, mentre i vari layer sono rappresentati in verde o rosso. Questo rendering viene fatto in automatico sopra la GUI e consente di scoprire se ci sono elementi fuori della vista, se ci sono Item sovrapposti e così via.