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

See the KDAB GammaRay page.

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