Debugging Qt Quick Projects

Note: You need Qt 4.7.1 or later to debug Qt Quick projects.

Setting Up QML Debugging

The process of setting up debugging for Qt Quick projects depends on the type of the project: Qt Quick UI or Qt Quick Application.

To debug Qt Quick UI projects:

1. Select Projects, and then select the QML check box in the Run Settings, to enable QML debugging.
2. Compile the debugging helpers. For more information, see Debugging Helpers for QML.

To debug Qt Quick Applications:

1. Modify the project file to comment in the following line:

   DEFINES += QMLJSDEBUGGER.

2. Select Projects, and then select the QML check box in the Run Settings, to enable QML debugging.
3. In the Target selector, select a debug configuration for the target.

   

4. Select Build > Rebuild Project to clean and rebuild the project in debug mode.

You can create debug configurations for project targets in the Projects mode.

Starting QML Debugging

To start the application, choose Debug > Start Debugging > Start Debugging or press F5. Once the application starts running, it behaves and performs as usual. You can then perform the following tasks:

• Debug JavaScript functions
• Preview QML changes at runtime
• Inspect QML at runtime

Debugging JavaScript Functions

You can use the Qt Creator Debug mode to inspect the state of your application while debugging. You can interact with the debugger in several ways, as described in the following sections:

• Setting Breakpoints
• Viewing Call Stack Trace
• Locals and Watchers

Executing JavaScript Expressions

When the application is interrupted by a breakpoint, you can use the QML Script Console to execute JavaScript expressions in the current context. To open it, choose Window > View > QML Script Console.

You can type JavaScript expressions and use them to get information about the state or your application. For example, property values.

You can see the current value of a property by hovering over it in the code editor.

Previewing QML Changes at Runtime

If you change property values or add properties in the code editor, the changes are updated in the running application when you save them. If live preview is not supported for an element, a message appears. Click Reload to preview the changes.

Reloading is enabled by default. To disable it, click in the QML Observer view.

Inspecting QML at Runtime

While the application is running, you can use the QML Observer view to explore the object structure, debug animations, and inspect colors. To open the QML Observer view, choose Window > View > QML Observer.

When you debug complex applications, you can use the observe mode to jump to the position in code where an element is defined. To switch to the observe mode, click in the QML Observer view.

Click elements in the running application to jump to their definitions in the code. Double-click elements to browse the element hierarchy. The hierarchy is displayed as bread crumbs in the QML Observer view.

You can also right-click an element in the running application to view the element hierarchy as a context menu. Select an element to jump to its definition in code.

To zoom in and out of the application, click the Zoom button.

To inspect colors, click the Color Picker button. You can also click to copy the color definition to the clipboard.

Debugging Animations

To play and pause animations in the running application, click the Play/Pause Animations button in the QML Observer view or Debugging > Animations > Pause or press Ctrl+..

To step through an animation, select Debugging > Animations > Pause & Step or press Ctrl+,.

To set step duration in milliseconds, select Debugging > Animations > Set Step. To change the speed at which animations are played, select a value in Debugging > Animations.