QML: List all object members/properties in console

Question

Is there any way to list all object members/properties in QML & Qt 5.1?

Such as:

var obj=myQObject;
console.log(obj)
// expected output:
// obj { x:123..... }

This would be very helpful for debugging.

Solution 1

Straight javascript offers what you are looking for:

JSON.stringify(anything)

It works on QML items such as Rectangle, and it also works on most arbitrary objects!

Converting an object to a string

Solution 2

With meta objects you can debug all properties of any QML obj (i.e. QQuickItem).

You need some C++ to get the meta object of a QML component and get back property names and values as text in QML.

First you create a QMLDebugger class in C++ with a properties method:

QString QMLDebugger::properties(QQuickItem *item, bool linebreak)
{
    const QMetaObject *meta = item->metaObject();

    QHash<QString, QVariant> list;
    for (int i = 0; i < meta->propertyCount(); i++)
    {
        QMetaProperty property = meta->property(i);
        const char* name = property.name();
        QVariant value = item->property(name);
        list[name] = value;
    }

    QString out;
    QHashIterator<QString, QVariant> i(list);
    while (i.hasNext()) {
        i.next();
        if (!out.isEmpty())
        {
            out += ", ";
            if (linebreak) out += "\n";
        }
        out.append(i.key());
        out.append(": ");
        out.append(i.value().toString());
    }
    return out;
}

This function can be static or instanceiable, doesn't matter. QML does not support exporting static methods from C++ to QML anyway. I use the header:

public:
    Q_INVOKABLE static QString properties(QQuickItem *item, bool linebreak = true);

Now you export the class to QML. In you main.cpp add

#include "qmldebugger.h"

and

qmlRegisterType<QMLDebugger>("MyDemoLibrary", 1, 0, "QMLDebugger");

In your QML file import you new library, create an instance of QMLDebugger and start happy debugging:

import QtQuick 2.0
import MyDemoLibrary 1.0

Rectangle {
    id: mainRectangle
    width: 360
    height: 360
    color: "silver"

    Text {
        id: textElement
        color: "#d71f1f"
        text: qsTr("Hello World")
        font.bold: true
        font.italic: true
        font.underline: true
        style: Text.Raised
        horizontalAlignment: Text.AlignHCenter
        font.pointSize: 16
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
    }

    QMLDebugger {
        id: qmlDebugger
    }

    Component.onCompleted: {
        console.log("Debug mainRectangle:");
        console.log(qmlDebugger.properties(mainRectangle));
        console.log("Debug textElement:");
        console.log(qmlDebugger.properties(textElement, false));
    }
}

The full source code is available as a minimal Qt Creator project on: https://github.com/webmaster128/QMLDebugger

Solution 3

Just convert the QML/C++ component/object into JavaScript var object, and use the for-each syntax to list all the property:

function listProperty(item)
{
    for (var p in item)
    console.log(p + ": " + item[p]);
}

in your QML file, just call

onClicked:
{
    listProperty(ItemID)

    //or with this to list self properties
    listProperty(this)
}

Solution 4

in case of any one wants to list only properties of an object, no signals nor slots you can use this

function listProperty(item)
{
    for (var p in item)
    {
        if( typeof item[p] != "function" )
            if(p != "objectName")
                console.log(p + ":" + item[p]);
    }

}

Solution 5

If you are not only interested in console-debugging, there is a program called GammaRay by KDAB (link) that lets you introspect and change all properties during the runtime of a QWidgets or QtQuick based program. Pretty neat!

View more solutions