Debugging Qt Quick Projects

Note: You need Qt 4.7.1 or later to debug Qt Quick projects. Debugging projects not created with the Qt Quick wizards is only supported with Qt 4.8, or later.

To debug Qt Quick applications running on devices, you must install Qt 4.7.4, or later, libraries on devices. To debug applications on Symbian devices, you must install also QML Viewer on them.

For an example of how to debug Qt Quick Projects, see Debugging a Qt Quick Example Application.

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, and the Qt version used.

To debug Qt Quick UI projects:

1. In Projects mode Run Settings, select the Enable QML check box in the Debugger Settings to enable QML debugging.
2. For Qt 4.7, compile the QML Inspector debugging helper. For more information, see Debugging Helpers for QML.

To debug Qt Quick Applications:

1. Debugging is enabled by default for Qt 4.8, or later. For Qt 4.7, select Projects, and then select the Enable QML debugging check box in the qmake section in Build Steps.

   You might have to compile the library first, by selecting the Compile link.

   

   Note: Debugging requires opening a socket at a well-known port, which presents a security risk. Anyone on the Internet could connect to the application that you are debugging and execute any JavaScript functions. Therefore, you must make sure that the port is properly protected by a firewall.

2. In the Run Settings, Debugger Settings section, select the Enable QML check box to enable QML debugging.
3. Select Build > Rebuild Project to clean and rebuild the project.
4. To debug applications on devices, check that Qt 4.7.4, or later, libraries are installed on the device and select the device as the target before you start debugging.

Mixed C++/QML Debugging

To debug both the C++ and QML parts of your application at the same time, select the Enable C++ and Enable QML checkboxes for both languages in the Debugger Settings section in the project Run Settings.

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
• Execute JavaScript expressions to get information about the state of the application
• Change QML code and immediately see the changes at runtime
• Inspect QML code and change it at runtime without changing the code
• Debug animations

To debug already running applications:

1. Start the application.
2. Select Debug > Start Debugging > Attach to QML Port.

   When debugging on the desktop, you can use the default values for the connection. When debugging on devices, enter the device IP address in the Host field.

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 by:

• Setting breakpoints
• Viewing call stack trace
• Viewing locals and expressions

Executing JavaScript Expressions

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

You can type JavaScript expressions and use them to get information about the state or your application. You can change property values temporarily, without editing the source, and view the results in the running application.

You can change the property values permanently in the code editor.

Applying QML Changes at Runtime

If you change property values or add properties in the code editor, the debugger can update the properties in the running application when you save the file. This is enabled by default. To disable it, click the (Apply Changes on Save) button on the toolbar.

When you change property values in the Console or QML Inspector, they are immediately updated in the running application, but not in the source code.

Inspecting QML at Runtime

While the application is running, you can use the QML Inspector view to explore the object structure, debug animations, and inspect colors. To open the QML Inspector view, choose Window > View > QML Inspector. The view shows the properties of the currently selected QML element.

To keep the application visible while you interact with the inspector, click (Show Application on Top).

To display a QML element in the QML Inspector view:

• Select the element in the code editor.
• Click (Select) to activate selection mode and then click an element in the running application.
• Select a child element of an element in the menu in the QML Inspector view:

  

• Select an element in the element path in the QML Inspector view.

To change property values temporarily, without editing the source, double-click them and enter the new values. You can view the results in the running application.

When you select an element, the cursor moves to it in the code editor, where you can change the value permanently.

Debugging Animations

When you debug complex applications, you can use the inspection mode to jump to the position in code where an element is defined. You are switched to the inspection mode, when you click the Select, Zoom, or Color Picker button on the toolbar.

When the Select tool is enabled, you can click elements in the running application to jump to their definitions in the code. The properties of the selected element are displayed in the QML Inspector view. The element hierarchy is displayed as a bread crumb path.

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

To switch to the zoom mode, click the Zoom button. Click in the running application to zoom in. Right-click to open a context menu that contains zoom controls.

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

To switch out of the inspection mode, deselect the Select, Zoom, and Color Picker button.

To move the application running in Qt QML Viewer to the front, select the Show Application on Top button.

To play and pause animations in the running application, select (Play Animations) and (Pause Animations) on the toolbar.

To change the speed at which animations are played, click and hold down Play/Pause Animations and select a value.