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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
|
/****************************************************************************
**
** Copyright (C) 2020 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.
// **********************************************************************
/*!
\page creator-debugging-qml.html
\if defined(qtdesignstudio)
\previouspage studio-debugging.html
\nextpage creator-qml-debugging-example.html
\else
\previouspage creator-debugging-helpers.html
\nextpage creator-debugging-example.html
\endif
\title Debugging Qt Quick Projects
\if defined(qtcreator)
\note You need Qt 5.0 or later to debug Qt Quick projects.
\endif
For an example of how to debug Qt Quick Projects, see
\l{Debugging a Qt Quick Example Application}.
\section1 Setting Up QML Debugging
\if defined(qtcreator)
The process of setting up debugging for Qt Quick projects depends on the
\l{Creating Qt Quick Projects}{type of the project}: Qt Quick UI or Qt Quick
Application, and the Qt version used.
\endif
To debug Qt Quick UI projects, select the \uicontrol {Enable QML} check box in the
\uicontrol {Debugger Settings} in \uicontrol Projects mode \uicontrol {Run Settings}.
\if defined(qtcreator)
To debug Qt Quick Applications:
\list 1
\li Debugging is enabled by default for Qt 5.0, or later.
\image qtcreator-projectpane.png "qmake general build settings pane"
\note Debugging requires opening a socket at a TCP port,
which presents a security risk. Anyone on the Internet could connect
to the application that you are debugging and execute any JavaScript
functions. Therefore, you must make sure that the port is properly
protected by a firewall.
\li In the \uicontrol {Run Settings}, \uicontrol {Debugger Settings} section, select
the \uicontrol {Enable QML} check box to enable
QML debugging.
\li Select \uicontrol Build > \uicontrol {Rebuild Project} to clean and
rebuild the project.
\li To debug applications on \l{glossary-device}{devices}, check that
Qt 5.0, or later, libraries are installed on the device and
\l{Running on Multiple Platforms}{select the corresponding kit for the device}
before you start debugging.
\endlist
\note The \c qmltooling plugins that are required for debugging are
automatically installed during \QC and Qt installation. Do not delete
them if you plan to debug QML applications.
\section1 Mixed C++/QML Debugging
To debug both the C++ and QML parts of your application at the same time,
select the \uicontrol {Enable C++} and \uicontrol {Enable QML} checkboxes for both
languages in the \uicontrol {Debugger Settings} section in the project
\uicontrol{Run Settings}.
\endif
\image qtquick-debugging-settings.png
\section1 Starting QML Debugging
To start the application, choose \uicontrol Debug > \uicontrol {Start Debugging}
> \uicontrol {Start Debugging of Startup Project} or press \key F5. Once the
application starts running, it behaves and performs as usual. You can then
perform the following tasks:
\list
\li Debug JavaScript functions
\li Execute JavaScript expressions to get information about the state of
the application
\li Inspect QML properties and JavaScript variables and change them
temporarily at runtime
\endlist
To debug already running applications:
\list 1
\if defined(qtcreator)
\li Build the application by using the appropriate configuration
parameters (if you build the application with \QC, it automatically
uses the correct configuration):
\c {CONFIG+=qml_debug}
\endif
\li Start the application with the following arguments:
\c {qmljsdebugger=port:<port>[,host:<ip address>][,block]}
Where \c port (mandatory) specifies the debugging port,
\c {ip address} (optional) specifies the IP address of the host
where the application is running, and \c block (optional) prevents
the application from running until the debug client connects to the
server. This enables debugging from the start.
\li Select \uicontrol Debug > \uicontrol {Start Debugging} >
\uicontrol {Attach to QML Port}.
Choose the kit configured for the device where the application to
be debugged is running. The port number to use is displayed in the
standard output when the application starts.
\endlist
\section1 Debugging JavaScript Functions
You can use the \QC \uicontrol Debug mode to inspect the state of your
application while debugging. You can interact with the debugger by:
\list
\li \l{Setting Breakpoints}{Setting breakpoints}
\li \l{Viewing Call Stack Trace}{Viewing call stack trace}
\li \l{Local Variables and Function Parameters}
{Viewing local variables and function parameters}
\li \l{Evaluating Expressions}
\endlist
\if defined(qtdesignstudio)
\include creator-debugger-common.qdocinc debugger-breakpoints
\include creator-debugger-common.qdocinc debugger-call-stack-trace
\include creator-debugger-common.qdocinc debugger-locals
\include creator-debugger-common.qdocinc debugger-expressions
\endif
\section1 Inspecting Items
While the application is running, you can use the \uicontrol {Locals}
view to explore the QML item structure.
\image qml-observer-view.png "QML item tree"
To keep the application visible while you interact with the debugger, select
\uicontrol Debug > \uicontrol {Show Application on Top}.
You can view a QML item in the \uicontrol {Locals} view in the following
ways:
\list
\li Expand the item in the object tree.
\li Select the item in the code editor.
\li Select \uicontrol Debug > \uicontrol Select to activate selection
mode and then click an item in the running application.
\endlist
To change property values temporarily, without editing the source,
double-click them and enter the new values. You can view the results in the
running application.
\section1 Inspecting User Interfaces
When you debug complex applications, you can jump to the position in code
where an item is defined.
In the selection mode, you can click items in the running
application to jump to their definitions in the code. The properties of the
selected item are displayed in the \uicontrol {Locals} view.
\if defined(qtcreator)
The \uicontrol Select tool will be enabled either if your application is
using Qt 5.7 or later, or if your application is using an earlier version
of Qt and is based on the \c QQuickView class.
\endif
You can also view the item hierarchy in the running application:
Double-click an item in the running application to cycle through the item
stack at the cursor position.
To switch out of the selection mode, toggle the \uicontrol Select menu item.
To move the application running in \QQV to the front, select
\uicontrol Debug > \uicontrol {Show Application on Top}.
\section1 Executing JavaScript Expressions
When the application is interrupted by a breakpoint, you can use the
\uicontrol {QML Debugger Console} to execute JavaScript expressions in the
current context. To open it, choose \uicontrol Window >
\uicontrol {Output Panes} > \uicontrol {QML Debugger Console}.
\image qml-script-console.png "QML Debugger Console"
You can change property values temporarily, without editing the source, and
view the results in the running application. You can change the property
values permanently in the \uicontrol Properties view in the Design mode.
\section1 Applying QML Changes at Runtime
When you change property values in the \uicontrol {QML Debugger Console} or
in the \uicontrol Locals or \uicontrol Expression view, they are immediately
updated in the running application, but not in the source code.
*/
|
