6 ms·

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

17 points by jandeboevrie 5y ago

xgulfie 5y ago
A mention of QDebug() is probably warranted here as well, since qml element behavior can be implemented in c++
joezydeco 5y ago
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.
- jandeboevrie 5y ago
  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).
pestophagous 5y ago
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-ci/blob/d083a8f0a7ca5/src/lib_app/qml/main.qml#L162 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-ci/pull/41 https://github.com/219-design/qt-qml-project-template-with-c...
- jandeboevrie 5y ago
  This is so cool! I think this is going to be very useful for me. How did you find the magic env variable?
  - pestophagous 5y ago
    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 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.
- yellow_lead 5y ago
  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.
  - milianw 5y ago
    I still remember optimizing customer code bases that suffered from horrible startup performance because they instantiated thousands of debug rects unconditionally all the time...
    - yellow_lead 5y ago
      Yeah and in QML you can wrap this in a loader but even if it's disabled I could see potential problems there.
milianw 5y ago
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/ https://github.com/KDAB/GammaRay/

17 points by jandeboevrie 5y ago

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

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.

jandeboevrie 5y ago
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).

pestophagous 5y ago

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-ci/blob/d083a8f0a7ca5/src/lib_app/qml/main.qml#L162 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-ci/pull/41 https://github.com/219-design/qt-qml-project-template-with-c...

jandeboevrie 5y ago
This is so cool! I think this is going to be very useful for me. How did you find the magic env variable?
- pestophagous 5y ago
  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 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.
yellow_lead 5y ago
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.
- milianw 5y ago
  I still remember optimizing customer code bases that suffered from horrible startup performance because they instantiated thousands of debug rects unconditionally all the time...
  - yellow_lead 5y ago
    Yeah and in QML you can wrap this in a loader but even if it's disabled I could see potential problems there.

milianw 5y ago

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/ https://github.com/KDAB/GammaRay/