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.
For an example of how to debug Qt Quick Projects, see Debugging a Qt Quick Example Application.
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:
To debug Qt Quick Applications:
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.
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.
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:
To debug already running applications:
qmljsdebugger=port:<port>[,host:<ip address>][,block]
Where port (mandatory) specifies the debugging port, ip address (optional) specifies the IP address of the host where the application is running, and block (optional) prevents the application from running until the debug client connects to the server. This enables debugging from the start.
Choose the kit configured for the device where the application to be debugged is running. The port number to use is displayed in the standard output when the application starts.
You can use the Qt Creator Debug mode to inspect the state of your application while debugging. You can interact with the debugger by:
When the application is interrupted by a breakpoint, you can use the QML/JS Console to execute JavaScript expressions in the current context. To open it, choose Window > Output Panes > QML/JS Console.
For more information about using the console, see QML/JS Console.
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 QML/JS Console or in the Locals and Expressions view, they are immediately updated in the running application, but not in the source code.
While the application is running, you can use the Locals and Expressions view to explore the QML item structure.
To keep the application visible while you interact with the debugger, click (Show Application on Top).
You can view a QML item in Locals and Expressions in the following ways:
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 debug complex applications, you can jump to the position in code where an item is defined or you can zoom into the user interface.
When the Select tool is enabled, you can click items in the running application to jump to their definitions in the code. The properties of the selected item are displayed in the Locals and Expressions view.
You can also right-click an item in the running application to view the item 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 switch out of the selection or zoom mode, deselect the Select or Zoom button.
To move the application running in Qt QML Viewer to the front, select the Show Application on Top button.