Tutorial: Qt Quick debugging

This tutorial uses the Same Game example application to illustrate how to debug Qt Quick applications in the Debug mode.

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

The Same Game demo shows how to write a game in QML, using JavaScript for all the game logic. Open the demo project in Qt Creator to debug it:

  1. To look at the code that starts a new game, place a breakpoint in samegame.qml by clicking between the line number and the window border on the line where the startNewGame() function is called (1).

    {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 Same Game application starts, select Puzzle to start a new game.

  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) on the toolbar or press F11 to step into the code in the stack. The samegame.js file opens in the code editor at the function that starts a new game.

    {Stack view}

  6. Examine the local variables in the Locals view. Step through the code to see how the information changes in the view.
  7. Add a breakpoint at the end of the startNewGame() function, and select (Continue) to hit the breakpoint.

    {Second breakpoint in the Breakpoints view}

  8. To execute JavaScript commands in the current context, open the QML Debugger Console.

  9. To remove a breakpoint, right-click it and select Delete Breakpoint.
  10. In the Locals view, explore the object structure at runtime.

  11. Go to Debug > Show Application on Top to keep the application visible while you interact with the debugger.
  12. Go to Debug > Select to activate selection mode, and then select Menu to move into the menuButton component in the Locals view and the code editor.
  13. In the Locals view, double-click the value of a property to change it.

See also Debugging Qt Quick Projects.

© 2024 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.