Today we are addressing an issue that is always a little tricky, even for experienced QML programmers: how do I know where my on-screen Items are?

Rectangles, rectangles, rectangles!

When we write code that deals with visual objects that change position or opacity, we need to know where these objects are and what their dimensions are. In these cases, a debugging technique that is very simple, but more effective than printing the position of the various objects on the console, is to insert a coloured rectangle inside the object to be displayed and voila! We obtain a nice coloured spot that shows us the position of our object.

In the event that the spot does not appear, we can check a number of aspects:

It is also possible to set the opacity of the rectangle to less than 1 if it is necessary to check the relative positions of several components.

Application X-ray

If our application was developed with Qt Widgets or with QtQuick (but only starting from Qt 5.2), we can take use GammaRay, a software that that is used to analyse the structure of the program in depth. Here are certain aspects we can display:

GammaRay works with both QtWidgets and QtQuick applications, it’s an open source application and can be downloaded from GitHub.

Performance and drawing

The last resource to analyse the layout of objects and the performance of the application is the QSG_VISUALIZE environment variable. Setting this variable it is possible to view various aspects related to the QML renderer. The most useful setting when we don’t know where the items are, is

Render QML

QSG_VISUALIZE = overdraw

In this screenshot, we see the blue lines that represent the QML view, while the various layers are represented in green or red. This rendering takes place automatically above the GUI and is used to ascertain whether there are items out of sight, if there are any overlapped items and so on.