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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Creator documentation.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
**
****************************************************************************/
// **********************************************************************
// 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.
// **********************************************************************
/*!
\contentspage {Qt Creator Manual}
\previouspage creator-debugging-example.html
\page creator-qml-debugging-example.html
\nextpage creator-troubleshooting-debugging.html
\title Debugging a Qt Quick Example Application
This section 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}.
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 where the \c startNewGame() function is
called (1).
\image qtquick-example-setting-breakpoint1.png
The red circle indicates that a breakpoint is now set on that line
number.
\li Select \uicontrol {Debug > Start Debugging > Start Debugging} or press
\key{F5}.
\li Once the Same Game application starts, click the \uicontrol {New Game}
button to start a new game.
\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 (1).
\image qtquick-example-setting-breakpoint2.png
\li Click the
\inlineimage qtcreator-debug-button-step-into.png
(\uicontrol {Step Into}) button 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.png
\li Examine the local variables in the \uicontrol {Locals and Expressions}
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
click \inlineimage qtcreator-debugging-continue.png
(\uicontrol Continue) to hit the breakpoint.
\image qtquick-example-setting-breakpoint3.png
\li To execute JavaScript commands in the current context, open the
\uicontrol {Debugger Console} output pane.
\li To change the score to 1000, enter \c{gameCanvas.score = 1000}
in the console.
\image qtquick-example-script-console.png
\li To remove a breakpoint, right-click it and select
\uicontrol {Delete Breakpoint}.
\li Select the \uicontrol {Locals and Expressions} tab to explore the object
structure at runtime:
\image qtquick-example-qml-inspector.png
\li Click
\inlineimage qml-inspector-app-on-top.png
(\uicontrol {Show Application on Top}) to keep the application visible
while you interact with the debugger.
\li Click
\inlineimage qml-inspector-select-button.png
(\uicontrol Select) to activate selection mode and then click the
\uicontrol {Quit} button to move into the \uicontrol ButtonLabel component
in the \uicontrol {Locals and Expressions} and the code editor.
\li In the \uicontrol {Locals and Expressions} view, double-click the value of
the \c text property to change it temporarily from \uicontrol {Quit} to
\uicontrol {End Game}.
\image qtquick-example-property-values.png
When you select an element, the cursor moves to it in the code
editor, where you can change the value permanently.
\endlist
*/
|
