This section 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 where the startNewGame() function is called (1).

   

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

2. Select Debug > Start Debugging > Start Debugging or press F5.
3. Once the Same Game application starts, click the New Game button 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 (1).

   

5. Click the (Step Into) button 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.

   

6. Examine the local variables in the Locals and Expressions 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 click (Continue) to hit the breakpoint.

   

8. To execute JavaScript commands in the current context, open the QML/JS Console output pane.
9. To change the score to 1000, enter gameCanvas.score = 1000 in the console.

   

10. To remove a breakpoint, right-click it and select Delete Breakpoint.
11. Select the Locals and Expressions tab to explore the object structure at runtime:

    

12. Click (Show Application on Top) to keep the application visible while you interact with the debugger.
13. Click (Select) to activate selection mode and then click the Quit button to move into the ButtonLabel component in the QML/JS Console and the code editor.
14. In the Locals and Expressions view, double-click the value of the text property to change it temporarily from Quit to End Game.

    

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