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

Recently I've been using a debugging technique in QT/QML that I've decided to name `Rectangle{}` debugging, in the same vein as `printf()` debugging. QML is a markup language (part of the QT framework) like HTML/CSS, with inline Javascript that can interact with the C++ code of your (QT) application. QML has the concept of `anchors` for relative positioning of elements. Overall, `anchors` work quite well, but can get complex when inheretance and complicated layouts come into play. The `Rectangle{}` style of debugging places a semi-transparent rectangle with a border around your element so you can visualize the positioning and see what effect your changes have. This article shows an example where I recently applied this style of debugging at work in our coffee machine user interface, including some tips to do actual `printf()` style debugging (but with `Console.log`).

Top News