Jump to content

Guidelines and HOWTOs/Debugging/QML: Difference between revisions

From KDE Community Wiki
← Older edit
Nmariusp (talk | contribs)
1,001 edits
Add chapter Misc
Nmariusp (talk | contribs)
1,001 edits
 
(2 intermediate revisions by the same user not shown)
Line 5: Line 5:
A screen recording version is available https://www.youtube.com/watch?v=aaqc_4K-cCQ
A screen recording version is available https://www.youtube.com/watch?v=aaqc_4K-cCQ


== KDAB gammaray ==
== 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.
See the [[Guidelines_and_HOWTOs/Gammaray | KDAB GammaRay]] page.


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.
== Open qml file using the executables qmlscene or qml ==


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.
<pre>
 
kdesrc-build discover
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".
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.
</pre>


== Misc ==
== 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
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

Latest revision as of 20:44, 23 May 2024

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

Retrieved from "https://community.kde.org/index.php?title=Guidelines_and_HOWTOs/Debugging/QML&oldid=100849"