qtquick-debugging.qdoc 9.55 KB
Newer Older
1 2 3 4
/****************************************************************************
**
** This file is part of Qt Creator
**
5
** Copyright (c) 2012 Nokia Corporation and/or its subsidiary(-ies).
6
**
7
** Contact: Nokia Corporation (qt-info@nokia.com)
8 9 10 11 12 13 14 15 16 17
**
**
** 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.
**
** If you have questions regarding the use of this file, please contact
18
** Nokia at qt-info@nokia.com.
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
**
****************************************************************************/

// **********************************************************************
// 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-troubleshooting-debugging.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. To debug applications on Symbian
    devices, you must install also QML Viewer on them.

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

47 48 49
    \section1 Setting Up QML Debugging

    The process of setting up debugging for Qt Quick projects depends on the
50 51
    \l{Creating Qt Quick Projects}{type of the project}: Qt Quick UI or Qt Quick
    Application, and the Qt version used.
52 53 54 55 56 57 58 59

    To debug Qt Quick UI projects:

    \list 1

        \o  Select \gui Projects, and then select the \gui QML check box in the
            \gui {Run Settings}, to enable QML debugging.

60
        \o  For Qt 4.7, compile the QML Inspector debugging helper. For more information,
61 62 63 64 65 66 67 68
            see \l{Debugging Helpers for QML}.

    \endlist

    To debug Qt Quick Applications:

        \list 1

69 70
        \o  Debugging is enabled by default for Qt 4.8, or later. For Qt 4.7,
            select \gui Projects, and then select the
71 72
            \gui {Enable QML debugging} check box in the \gui qmake section
            in \gui {Build Steps}.
73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90

            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}, select the \gui QML check box to enable
            QML debugging.

        \o  Select \gui {Build > Rebuild Project} to clean and rebuild the
            project.

91 92 93 94
        \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 Targets}{select the device as the target}
            before you start debugging.
95

96
    \endlist
97 98 99 100

    \section1 Mixed C++/QML Debugging

    To debug both the C++ and QML parts of your application at the same time,
101
    select the checkboxes for both languages in the \gui{Run Settings}.
102

103 104
    \image qtquick-debugging-settings.png

105 106 107 108 109 110 111 112 113 114
    \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

115 116 117 118 119 120 121 122 123 124 125 126 127 128
        \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 at runtime without changing the code

        \o  Debug animations

    \endlist

    To debug already running applications:

    \list 1
129

130 131 132 133 134 135 136
        \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.
137 138 139 140 141 142

    \endlist

    \section1 Debugging JavaScript Functions

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

    \list

147
        \o  \l{Setting Breakpoints}{Setting breakpoints}
148

149
        \o  \l{Viewing Call Stack Trace}{Viewing call stack trace}
150

151
        \o  \l{Locals and Expressions}{Viewing locals and expressions}
152 153 154 155 156 157 158 159 160 161 162 163

    \endlist

    \section1 Executing JavaScript Expressions

    When the application is interrupted by a breakpoint, you can use the
    \gui {QML Script Console} to execute JavaScript expressions in the current
    context. To open it, choose \gui {Window > View > QML Script Console}.

    \image qml-script-console.png "QML Script Console view"

    You can type JavaScript expressions and use them to get information about
164 165
    the state or your application. You can change property values temporarily,
    without editing the source, and view the results in the running application.
166

167
    You can change the property values permanently in the code editor.
168 169 170 171

    \section1 Applying QML Changes at Runtime

    If you change property values or add properties in the code editor, the
172 173
    debugger can update the properties in the running application when you save
    the file. This is enabled by default. To disable it, click
174 175 176
    \inlineimage qml-observer-bar-reload.png "Apply Changes on Save button"
    on the toolbar.

177 178 179 180
    When you change property values in the \gui {QML Script Console} or
    \gui {QML Inspector}, they are immediately updated in the running
    application, but not in the source code.

181 182 183 184 185 186 187 188 189 190
    \section1 Inspecting QML at Runtime

    While the application is running, you can use the \gui {QML Inspector} view
    to explore the object structure, debug animations, and inspect colors.
    To open the \gui {QML Inspector} view, choose \gui {Window > View >
    QML Inspector}. The view shows the properties of the currently selected QML
    element.

    \image qml-observer-view.png "QML Inspector view"

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
    To keep the application visible while you interact with the inspector, click
    \inlineimage qml-inspector-app-on-top.png
    (\gui {Show Application on Top}).

    To display a QML element in the \gui {QML Inspector} view:

    \list

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

        \o  Select a child element of an element in the menu in the
            \gui {QML Inspector} view:

            \image qtquick-example-children.png

        \o  Select an element in the element path in the \gui {QML Inspector}
            view.

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

    When you select an element, the cursor moves to it in the code editor, where
    you can change the value permanently.

    \section1 Debugging Animations

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 252 253 254 255 256
    When you debug complex applications, you can use the inspection
    mode to jump to the position in code where an element is defined. You are
    switched to the inspection mode, when you click the \gui Select, \gui Zoom,
    or \gui {Color Picker} button
    on the toolbar.

    \image qml-observer-buttons.png "QML Inspector toolbar"

    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 {QML Inspector} view. The element
    hierarchy is displayed as a bread crumb path.

    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 Inspector"

    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 inspect colors, click the \gui {Color Picker} button. You can also click
    \inlineimage qml-observer-bar-copy-color.png "Copy Color button"
    to copy the color definition to the clipboard.

    To switch out of the inspection mode, deselect the \gui Select, \gui Zoom,
    and \gui {Color Picker} button.

    To move the application running in \QQV to the front, select the
    \gui {Show Application on Top} button.

Leena Miettinen's avatar
Leena Miettinen committed
257 258 259 260 261
    To play and pause animations in the running application, select
    \inlineimage qml-inspector-play.png
    and
    \inlineimage qml-inspector-pause.png
    on the toolbar.
262

Leena Miettinen's avatar
Leena Miettinen committed
263 264 265 266 267
    To change the speed at which animations are played, click and hold down
    \inlineimage qml-inspector-play.png
    or
    \inlineimage qml-inspector-pause.png
    and select a value.
268 269

*/