1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
// Copyright (C) 2024 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
// **********************************************************************
// NOTE: the sections are not ordered by their logical order to avoid
// reshuffling the file each time the index order changes (i.e., often).
// Run the fixnavi.pl script to adjust the links to the index order.
// **********************************************************************
/*!
\page creator-qml-debugging-example.html
\if defined(qtdesignstudio)
\previouspage creator-expressions-view.html
\nextpage creator-qml-performance-monitor.html
\else
\previouspage creator-tutorials.html
\nextpage creator-how-tos.html
\endif
\ingroup creator-tutorials
\title Debugging a Qt Quick Application
\brief How to debug a Qt Quick application.
This tutorial uses the \l{QML Advanced Tutorial}{Same Game}
example application to illustrate how to debug Qt Quick applications in the
\uicontrol Debug mode.
For more information about all the options you have, see
\l{Debugging Qt Quick Projects}.
\if defined(qtdesignstudio)
\note In this tutorial, you are using advanced menu items. These are not
visible by default. To toggle the visibility of advanced menu items, see
\l{Customizing the Menu Bar}.
\endif
The Same Game demo shows how to write a game in QML, using JavaScript for
all the game logic. Open the demo project in \QC to debug it:
\list 1
\li 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 \c startNewGame() function is
called (1).
\image qtquick-example-setting-breakpoint1.webp {Breakpoint in the code editor}
The red circle indicates that a breakpoint is now set on that line
number.
\li Go to \uicontrol Debug > \uicontrol {Start Debugging} >
\uicontrol {Start Debugging of Startup Project}, or press
\key{F5}.
\li Once the Same Game application starts, select \uicontrol {Puzzle}
to start a new game.
\image samegame.png
\li When the debugger hits the breakpoint, it interrupts the
application. \QC displays the nested function calls leading to the
current position as a call stack trace.
\image qtquick-example-setting-breakpoint2.webp {Debugger view}
\li Select \inlineimage icons/debugger_stepinto_small.png
(\uicontrol {Step Into}) on the toolbar or press \key 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.
\image qtquick-example-stack.webp {Stack view}
\li Examine the local variables in the \uicontrol Locals
view. Step through the code to see how the information changes in
the view.
\li Add a breakpoint at the end of the \c {startNewGame()} function, and
select \inlineimage icons/qtcreator-debugging-continue.png
(\uicontrol Continue) to hit the breakpoint.
\image qtquick-example-setting-breakpoint3.webp {Second breakpoint in the Breakpoints view}
\li To execute JavaScript commands in the current context, open the
\uicontrol {QML Debugger Console}.
\image qml-script-console.png
\li To remove a breakpoint, right-click it and select
\uicontrol {Delete Breakpoint}.
\li In the \uicontrol Locals view, explore the object structure at
runtime.
\image qtquick-example-qml-inspector.png
\li Go to \uicontrol Debug > \uicontrol {Show Application on Top} to
keep the application visible while you interact with the debugger.
\li Go to \uicontrol Debug > \uicontrol Select to activate selection
mode, and then select \uicontrol Menu to move into the
\uicontrol menuButton component in the \uicontrol Locals view and
the code editor.
\li In the \uicontrol Locals view, double-click the value of a property
to change it.
\endlist
\sa {Debugging Qt Quick Projects}
*/
|
