Debugging QML

Logging

console.log can be used to print debugging information to the console. For example:

 Rectangle {
     width: 200; height: 200
     MouseArea {
         anchors.fill: parent
         onClicked: console.log("clicked")
     }
 }

Debugging Transitions

When a transition doesn't look quite right, it can be helpful to view it in slow motion to see what is happening more clearly. This functionality is supported in the QML Viewer tool: to enable this, click on the "Debugging" menu, then "Slow Down Animations".

Debugging module imports

The QML_IMPORT_TRACE environment variable can be set to enable debug output from QML's import loading mechanisms.

For example, for a simple QML file like this:

 import QtQuick 1.0

 Rectangle { width: 100; height: 100 }

If you set QML_IMPORT_TRACE=1 before running the QML Viewer (or your QML C++ application), you will see output similar to this:

 QDeclarativeImportDatabase::addImportPath "/qt-sdk/imports"
 QDeclarativeImportDatabase::addImportPath "/qt-sdk/bin/QMLViewer.app/Contents/MacOS"
 QDeclarativeImportDatabase::addToImport 0x106237370 "." -1.-1 File as ""
 QDeclarativeImportDatabase::addToImport 0x106237370 "Qt" 4.7 Library as ""
 QDeclarativeImportDatabase::resolveType "Rectangle" = "QDeclarativeRectangle"

Debugging with Qt Creator

Qt Creator provides built-in support for QML debugging. QML projects and standalone C++ applications that utilize QML can be debugged on desktops as well as on remote devices. For more information, see the Qt Creator Manual.