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.

Answer 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

Answer 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