Rectangle{} debugging in QML – like printf(), but for QT | Hacker News Reader

Rectangle{} debugging in QML – like printf(), but for QT

raymii.org

17 pointsjandeboevrie10 comments

You should look into GammaRay which allows you to such debugging without having to change your code. You can literally just pick the element on the screen. See: https://github.com/KDAB/GammaRay/

Indeed, it's all rectangles, all the way down. (For the most part.)

I implement a lot of QML (with C++ viewModels to back it).

My UI designer actually issued a challenge to me, to see if I could get "Debug Rectangles" to toggle on-and-off without a rebuild. I'm so grateful for that challenge, because once the seed of the idea was planted, my thirst for this "nice-to-have" feature grew until I couldn't NOT solve it.

I now have:

``` DebugRectangle{} ```

https://github.com/219-design/qt-qml-project-template-with-c...

... which I place inside any item that needs a highlight. I then leave this code in place (nothing to comment-in/comment-out).

I hijack an environment variable for the toggle. The icing on the cake was seeing that this works both when running a compiled binary executable ("my Qt/QML app binary") and when viewing my QML with just qmlscene. https://github.com/219-design/qt-qml-project-template-with-c...

This is so cool! I think this is going to be very useful for me. How did you find the magic env variable?

Glad you like it! Good question about how did I find that variable. It's been over a year and I tried to trace the history of that discovery and I cannot fully recall. This page: https://doc.qt.io/qt-5/qtquickcontrols2-material.html ... mentions the environment variables. I think it had been a lucky coincidence. I had been racking my brain trying to figure out how I would toggle these rectangles without a rebuild, and then I was working with the Material Style feature in QML and I think that when I came across the table on that page labeled "Environment Variables" it just clicked and I realize it could be the answer I was looking for.

If it's a non-release build that seems fine, but do you have a way to disable this in release builds? Even if the object doesn't show, since QML may be loaded dynamically, having these scattered around could slow your app.

I still remember optimizing customer code bases that suffered from horrible startup performance because they instantiated thousands of debug rects unconditionally all the time...

Yeah and in QML you can wrap this in a loader but even if it's disabled I could see potential problems there.

Why wouldn't you figure out the anchors/margins/separation during development? Why wait for debugging to do this?

Qt Creator still has the form designer (NOT the debugger as mentioned in the post) that can be brought up on any component. It's not optimal either, but it's better than modifying item scalars by hand.

This was during development, also stated in the article.

The forms designer does not work if you use qrc:/ includes or inline javascript, plus it generates ugly code (and uses hard x / y positions instead of anchors).

A mention of QDebug() is probably warranted here as well, since qml element behavior can be implemented in c++

Reply on news.ycombinator.com