StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>With meta objects you can debug all properties of any QML <code>obj</code> (i.e. <a href="http://qt-project.org/doc/qt-5.1/qtquick/qquickitem.html">QQuickItem</a>).</p> <p>You need some C++ to get the meta object of a QML component and get back property names and values as text in QML.</p> <p>First you create a <code>QMLDebugger</code> class in C++ with a <code>properties</code> method:</p> <pre><code>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; } </code></pre> <p>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:</p> <pre><code>public: Q_INVOKABLE static QString properties(QQuickItem *item, bool linebreak = true); </code></pre> <p>Now you export the class to QML. In you <code>main.cpp</code> add</p> <pre><code>#include "qmldebugger.h" </code></pre> <p>and</p> <pre><code>qmlRegisterType<QMLDebugger>("MyDemoLibrary", 1, 0, "QMLDebugger"); </code></pre> <p>In your QML file import you new library, create an instance of QMLDebugger and start happy debugging:</p> <pre><code>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)); } } </code></pre> <p>The full source code is available as a minimal Qt Creator project on: <a href="https://github.com/webmaster128/QMLDebugger">https://github.com/webmaster128/QMLDebugger</a></p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload