Guidelines and HOWTOs/Debugging/QML

Qt Creator QML debugger

Qt Creator contains a debugger for QML and javascript for QML. See https://doc.qt.io/qtcreator/creator-debugging-qml.html

A screen recording version is available https://www.youtube.com/watch?v=aaqc_4K-cCQ

KDAB gammaray

If your QML application is built using the same Qt version as the application gammaray. E.g. install both Qt and gammaray from your Linux OS' packages.

Then open your QML app, open gammaray and tell gammaray to connect to your QML app. In gammaray, the top level tab "Quick Scenes" is for inspecting QML and Qt Quick. The top level tab "Models" is for the model objects that are provided to QML objects. "Problems" is for QML warnings such as binding loops or QML objects that are outside of the view.

In "Quick Scenes" in the top of the window the is a combobox that allows you to select the QML window that you want to inspect. E.g. if an application has both a main window and a settings window.

You can right click on a QML object and select "Show in "Quick Scenes" tool", "Show in "Objects" tool", "Show in "Meta Objects" tool", "Show in "Signals" tool".

Open qml file using the executables qmlscene or qml

kdesrc-build discover
source ~/kde/build/kconfig/prefix.sh
cd ~/kde/src/discover/libdiscover/backends/PackageKitBackend/qml
qml PackageKitPermissions.qml
# Returns error:
file:///~/kde/src/discover/libdiscover/backends/PackageKitBackend/qml/PackageKitPermissions.qml:26:15: Invalid property assignment: unsupported type "QQuickIcon"
qml: Did not load any objects, exiting.
# Fix error. In file PackageKitPermissions.qml replace
# icon: "security-medium"
# withe
# icon.name: "security-medium"
qml PackageKitPermissions.qml
# Returns warning:
# file:///~/kde/src/discover/libdiscover/backends/PackageKitBackend/qml/PackageKitPermissions.qml:24: ReferenceError: i18nd is not defined
# All qml files should contain only one top level item, in this case
# it is a "ColumnLayout {". Immediately below "ColumnLayout {" define all
# of the functions which are in the global namespace, e.g. the i18n functions:
/*Debug tool.*/ function i18nd(context, stringID) { return stringID} function i18ndc(domain, context, stringID, args) { return stringID}
# Keep the above snippet one line, this way it is easier to copy into the qml file and then revert the file.
# Temporarily comment out things, replace right hand side with a hardcoded value of the correct type etc.
# Until "qml PackageKitPermissions.qml" runs without errors and shows all
# the GUI items defined in the qml file.

Misc

There are javascript logging functions. You can debug module imports. There are the tools qml, qmlscene, qmllint, qmlprofiler. See https://doc.qt.io/qt-6/qtquick-debugging.html