Raymii.org

Table of Contents

• Demo Qml Program

This small snippet of Javascript logs all properties and functions of a Qml Item. This is useful when you're knees-deep in a dynamic control that has a model and you're wondering why your code does not work. Probably because you're not using the correct property name. Or at least, that is something I often have. Logging all properties or functions helps to figure out that issue.

Recently I removed all Google Ads from this site due to their invasive tracking, as well as Google Analytics. Please, if you found this content useful, consider a small donation using any of the options below:

I'm developing an open source monitoring app called Leaf Node Monitoring, for windows, linux & android. Go check it out!

Consider sponsoring me on Github. It means the world to me if you show your appreciation and you'll help pay the server costs.

You can also sponsor me by getting a Digital Ocean VPS. With this referral link you'll get $200 credit for 60 days. Spend $25 after your credit expires and I'll get $25!

A demo program that logs functions and properties to the command line and a TextArea

The code to log all properties is actually very simple:

function listProperties(item) {
    var properties = ""
    for (var p in item)
        if (typeof item[p] != "function")
            properties += (p + ": " + item[p] + "\n")
    return properties
}

Same goes for logging all functions:

function listFunctions(item) {
    var functions = ""
    for (var f in item)
        if (typeof item[f] == "function")
            functions += (f + ": " + item[f] + "\n")
    return functions
}

If you remove the if(typeof... then you get both in the output.

Usage is simple, just pass the id: of an item you want to log:

Button {
    id: logButton
    [...]
    text: "Log Properties"
    onClicked: {
        console.log(listProperties(logButton))
    }
}

You could also use JSON.stringify() but I have seen recursive loops that crashed when using that, so this is my small goto snippet.

Demo Qml Program

Here's a small Qml demo program that logs either functions or properties to the command line and a TextArea.

main.qml

import QtQuick 2.15
import QtQuick.Controls 2.12
import QtQuick.Window 2.15

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Log Properties Example")

    function listProperties(item) {
        var properties = ""
        for (var p in item)
            if (typeof item[p] != "function")
                properties += (p + ": " + item[p] + "\n")
        return properties
    }

    function listFunctions(item) {
        var functions = ""
        for (var f in item)
            if (typeof item[f] == "function")
                functions += (f + ": " + item[f] + "\n")
        return functions
    }

    Button {
        id: logButton
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 50
        objectName: "Raymii.org Example"
        text: "Log Properties"
        onClicked: {
            console.log(listProperties(logButton))
            logTextarea.text = listProperties(logButton)
        }
    }

    Button {
        id: logFunctionsButton
        anchors.top: parent.top
        anchors.left: logButton.right
        anchors.margins: 50
        text: "Log Functions"
        onClicked: {
            console.log(listFunctions(logFunctionsButton))
            logTextarea.text = listFunctions(logFunctionsButton)
        }
    }

    ScrollView {
        id: propertyview
        anchors.top: logButton.bottom
        anchors.left: parent.left
        anchors.margins: 50
        width: 500
        height: 300

        TextArea {
            id: logTextarea
            anchors.fill: parent
            placeholderText: "click the buttons"
        }
    }
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>


int main(int argc, char *argv[])
{
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
#endif

    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    const QUrl url(QStringLiteral("qrc:/main.qml"));
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

Tags: c++ , cpp , debugging , javascript , qml , qt , qt5 , snippets