qtquick-debugging.qdoc 8.4 KB
Newer Older
1 2
/****************************************************************************
**
3 4
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
5
**
6
** This file is part of the Qt Creator documentation.
7
**
8 9 10 11 12 13 14
** 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.
15
**
16
** GNU Free Documentation License Usage
17 18
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
19 20 21 22
** 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.
23 24 25 26 27 28 29 30 31 32
**
****************************************************************************/

// **********************************************************************
// 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.
// **********************************************************************

/*!
33
    \contentspage {Qt Creator Manual}
34 35
    \previouspage creator-debugging-helpers.html
    \page creator-debugging-qml.html
36
    \nextpage creator-debugging-example.html
37 38 39

    \title Debugging Qt Quick Projects

Ulf Hermann's avatar
Ulf Hermann committed
40
    \note You need Qt 5.0 or later to debug Qt Quick projects.
41

42 43 44
    For an example of how to debug Qt Quick Projects, see
    \l{Debugging a Qt Quick Example Application}.

45 46 47
    \section1 Setting Up QML Debugging

    The process of setting up debugging for Qt Quick projects depends on the
48 49
    \l{Creating Qt Quick Projects}{type of the project}: Qt Quick UI or Qt Quick
    Application, and the Qt version used.
50

51 52
    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}.
53 54 55 56 57

    To debug Qt Quick Applications:

        \list 1

Ulf Hermann's avatar
Ulf Hermann committed
58
        \li Debugging is enabled by default for Qt 5.0, or later.
59 60

            You might have to compile the library first, by selecting the
61
            \uicontrol Compile link.
62 63 64

            \image qml-link-debugging-library.png "Build Steps"

Ulf Hermann's avatar
Ulf Hermann committed
65
            \note Debugging requires opening a socket at a TCP port,
66 67 68 69 70
            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.

71 72
        \li In the \uicontrol {Run Settings}, \uicontrol {Debugger Settings} section, select
            the \uicontrol {Enable QML} check box to enable
73 74
            QML debugging.

75
        \li Select \uicontrol {Build > Rebuild Project} to clean and rebuild the
76 77
            project.

Ulf Hermann's avatar
Ulf Hermann committed
78
        \li To debug applications on devices, check that Qt 5.0, or later,
79
            libraries are installed on the device and
80
            \l{Running on Multiple Platforms}{select the corresponding kit for the device}
81
            before you start debugging.
82

83
    \endlist
84 85 86 87

    \section1 Mixed C++/QML Debugging

    To debug both the C++ and QML parts of your application at the same time,
88 89 90
    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}.
91

92 93
    \image qtquick-debugging-settings.png

94 95
    \section1 Starting QML Debugging

96
    To start the application, choose \uicontrol {Debug > Start Debugging >
97 98 99 100 101
    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

102
        \li Debug JavaScript functions
103

104
        \li Execute JavaScript expressions to get information about the state of
105 106
            the application

Ulf Hermann's avatar
Ulf Hermann committed
107 108
        \li Inspect QML properties and JavaScript variables and change them
            temporarily at runtime
109 110 111 112 113 114

    \endlist

    To debug already running applications:

    \list 1
115

116 117 118 119
        \li Build the application by using the appropriate configuration
            parameters (if you build the application with \QC, it automatically
            uses the correct configuration):

Ulf Hermann's avatar
Ulf Hermann committed
120
            \c {CONFIG+=qml_debug}
121 122 123 124 125 126 127 128 129 130 131


        \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.
132

133
        \li Select \uicontrol {Debug > Start Debugging > Attach to QML Port}.
134

135 136 137
            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.
138 139 140 141 142

    \endlist

    \section1 Debugging JavaScript Functions

143
    You can use the \QC \uicontrol Debug mode to inspect the state of your
144
    application while debugging. You can interact with the debugger by:
145 146 147

    \list

148
        \li \l{Setting Breakpoints}{Setting breakpoints}
149

150
        \li \l{Viewing Call Stack Trace}{Viewing call stack trace}
151

152
        \li \l{Locals and Expressions}{Viewing locals and expressions}
153 154 155 156 157 158

    \endlist

    \section1 Executing JavaScript Expressions

    When the application is interrupted by a breakpoint, you can use the
hjk's avatar
hjk committed
159
    \uicontrol {Debugger Console} to execute JavaScript expressions in the current
160
    context. To open it, choose \uicontrol Window > \uicontrol {Output Panes}
hjk's avatar
hjk committed
161
    > \uicontrol {Debugger Console}.
162

hjk's avatar
hjk committed
163
    \image qml-script-console.png "Debugger Console"
164

hjk's avatar
hjk committed
165
    For more information about using the console, see \l{Debugger Console}.
166 167 168

    \section1 Applying QML Changes at Runtime

hjk's avatar
hjk committed
169
    When you change property values in the \uicontrol {Debugger Console} or in the
170
    \uicontrol {Locals and Expressions} view, they are immediately updated in the running
171 172
    application, but not in the source code.

173
    \section1 Inspecting Items
174

175
    While the application is running, you can use the
176
    \uicontrol {Locals and Expressions} view to explore the QML item structure.
177

178
    \image qml-observer-view.png "QML item tree"
179

180 181
    To keep the application visible while you interact with the debugger, select
    \uicontrol Debug > \uicontrol {Show Application on Top}.
182

183
    You can view a QML item in \uicontrol {Locals and Expressions} in the following
184
    ways:
185 186 187

    \list

188
        \li Expand the item in the object tree.
189

190
        \li Select the item in the code editor.
191

192 193
        \li Select \uicontrol Debug > \uicontrol Select to activate selection
            mode and then click an item in the running application.
194 195 196 197 198 199 200

    \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.

201
    \section1 Inspecting User Interfaces
202

203
    When you debug complex applications, you can jump to the position in code
Ulf Hermann's avatar
Ulf Hermann committed
204
    where an item is defined.
205

206
    In the selection mode, you can click items in the running
207
    application to jump to their definitions in the code. The properties of the
208
    selected item are displayed in the \uicontrol {Locals and Expressions} view.
209

210 211 212 213
    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.

214
    You can also view the item hierarchy in the running application:
215

Ulf Hermann's avatar
Ulf Hermann committed
216 217
    Double-click an item in the running application to cycle through the item
    stack at the cursor position.
218

219
    To switch out of the selection mode, toggle the \uicontrol Select menu item.
220

221 222
    To move the application running in \QQV to the front, select
    \uicontrol Debug > \uicontrol {Show Application on Top}.
223 224

*/