Tutorial: Qt Quick debugging

This tutorial uses the example application that the New Project wizard generates to illustrate how to debug Qt Quick applications in the Debug mode. For a tutorial that describes the example application, see Tutorial: Qt Quick application.

For more information about all the options you have, see Debugging Qt Quick projects.

The example application illustrates basic concepts of Qt Quick. Open the example project in Qt Creator to debug it:

  1. To look at the code that reacts to button clicks, place a breakpoint in Main.qml by clicking between the line number and the window border on the line where the onClicked signal handler is triggered.

    Breakpoint in the code editor

    The red circle indicates that a breakpoint is now set on that line number.

  2. Go to Debug > Start Debugging > Start Debugging of Startup Project, or press F5.
  3. Once the application starts, select Light mode to switch modes.

    Qt Quick Application created with the new project wizard

  4. When the debugger hits the breakpoint, it interrupts the application. Qt Creator displays the nested function calls leading to the current position as a call stack trace.

    Debugger view

  5. Select Step Into (Step Into) on the toolbar or select F11 to step into the code in the stack.
  6. Examine the local variables in the Locals view. Step through the code to see how the information changes in the view.

Examine local variables

In the Locals view, explore the object structure at runtime.

Locals view

Double-click the value of a property to change it.

Remove a breakpoint

To remove a breakpoint, right-click it and select Delete Breakpoint.

Show application on top

Go to Debug > Show Application on Top to keep the application visible while you interact with the debugger.

See also Tutorial: Qt Quick application and Debugging Qt Quick projects.