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
|
/****************************************************************************
**
** This file is part of Qt Creator
**
** Copyright (c) 2012 Nokia Corporation and/or its subsidiary(-ies).
**
** Contact: http://www.qt-project.org/
**
**
** GNU Free Documentation License
**
** 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.
**
**
****************************************************************************/
// **********************************************************************
// 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 index.html
\previouspage creator-debugging-helpers.html
\page creator-debugging-qml.html
\nextpage creator-debugging-example.html
\title Debugging Qt Quick Projects
\note You need Qt 4.7.1 or later to debug Qt Quick projects. Debugging
projects not created with the Qt Quick wizards is only supported with
Qt 4.8, or later.
To debug Qt Quick applications running on devices, you must install
Qt 4.7.4, or later, libraries on devices.
For an example of how to debug Qt Quick Projects, see
\l{Debugging a Qt Quick Example Application}.
\section1 Setting Up QML Debugging
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.
To debug Qt Quick UI projects:
\list 1
\o In \gui Projects mode \gui {Run Settings}, select the
\gui {Enable QML} check box in the \gui {Debugger Settings} to
enable QML debugging.
\o For Qt 4.7, compile the QML Inspector debugging helper. For more information,
see \l{Debugging Helpers for QML}.
\endlist
To debug Qt Quick Applications:
\list 1
\o Debugging is enabled by default for Qt 4.8, or later. For Qt 4.7,
select \gui Projects, and then select the
\gui {Enable QML debugging} check box in the \gui qmake section
in \gui {Build Steps}.
You might have to compile the library first, by selecting the
\gui Compile link.
\image qml-link-debugging-library.png "Build Steps"
\note Debugging requires opening a socket at a well-known 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.
\o In the \gui {Run Settings}, \gui {Debugger Settings} section, select
the \gui {Enable QML} check box to enable
QML debugging.
\o Select \gui {Build > Rebuild Project} to clean and rebuild the
project.
\o To debug applications on devices, check that Qt 4.7.4, 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
\section1 Mixed C++/QML Debugging
To debug both the C++ and QML parts of your application at the same time,
select the \gui {Enable C++} and \gui {Enable QML} checkboxes for both
languages in the \gui {Debugger Settings} section in the project
\gui{Run Settings}.
\image qtquick-debugging-settings.png
\section1 Starting QML Debugging
To start the application, choose \gui {Debug > Start Debugging >
Start Debugging} or press \key F5. Once the application starts running, it
behaves and performs as usual. You can then perform the following tasks:
\list
\o Debug JavaScript functions
\o Execute JavaScript expressions to get information about the state of
the application
\o Change QML code and immediately see the changes at runtime
\o Inspect QML code and change it temporarily at runtime
\endlist
To debug already running applications:
\list 1
\o Start the application.
\o Select \gui {Debug > Start Debugging > Attach to QML Port}.
When debugging on the desktop, you can use the default values for
the connection. When debugging on devices, enter the device IP
address in the \gui Host field.
\endlist
\section1 Debugging JavaScript Functions
You can use the \QC \gui Debug mode to inspect the state of your
application while debugging. You can interact with the debugger by:
\list
\o \l{Setting Breakpoints}{Setting breakpoints}
\o \l{Viewing Call Stack Trace}{Viewing call stack trace}
\o \l{Locals and Expressions}{Viewing locals and expressions}
\endlist
\section1 Executing JavaScript Expressions
When the application is interrupted by a breakpoint, you can use the
\gui {Console} to execute JavaScript expressions in the current
context. To open it, choose \gui {Window > Views > Console}.
\image qml-script-console.png "Console view"
You can type JavaScript expressions and use them to get information about
the state or your application. 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 code editor.
\section1 Applying QML Changes at Runtime
If you change property values or add properties in the code editor, the
debugger can update the properties in the running application when you save
the file. This is enabled by default. To disable it, click the
\inlineimage qml-observer-bar-reload.png "Apply Changes on Save button"
(\gui {Apply Changes on Save}) button on the toolbar.
When you change property values in the \gui {Console} or in the
\gui {Locals and Expressions} view, they are immediately updated in the running
application, but not in the source code.
\section1 Inspecting QML Objects
While the application is running, you can use the
\gui {Locals and Expressions} view to explore the QML object structure.
\image qml-observer-view.png "QML object tree"
To keep the application visible while you interact with the debugger, click
\inlineimage qml-inspector-app-on-top.png
(\gui {Show Application on Top}).
You can view a QML element in \gui {Locals and Expressions} in the following
ways:
\list
\o Expand the element in the object tree.
\o Select the element in the code editor.
\o Click
\inlineimage qml-inspector-select-button.png
(\gui Select) to activate selection mode and then click an element
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 element is defined or you can zoom into the user interface.
When the \gui Select tool is enabled, you can click elements in the running
application to jump to their definitions in the code. The properties of the
selected element are displayed in the \gui {Locals and Expressions} view.
You can also right-click an element in the running application to view the
element hierarchy as a context menu.
\image qml-observer-context-menu.png "QML element hierarchy"
To switch to the zoom mode, click the \gui Zoom button. Click in the
running application to zoom in. Right-click to open a context menu that
contains zoom controls.
To switch out of the selection or zoom mode, deselect the \gui Select or
\gui Zoom button.
To move the application running in \QQV to the front, select the
\gui {Show Application on Top} button.
*/
|
