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 Qt 4.7

 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. Open a QML project in Creator and enter Debug mode, or click the "Start Debugging" option from the menu, and Creator will show QML debugging information and options for your application, including object inspection, property monitoring and application frame-rate analysis.

Creator can be used to debug both local and remote QML applications. To enable remote debugging, start the QML Viewer on the remote device with a debugging port defined, like this:

     QML_DEBUG_SERVER_PORT=3768 qmlviewer myqmlfile.qml

In Creator, open the project settings pane and set the server and port details for the remote device, then start debugging.