qtquick-debugger-example.qdoc 4.62 KB
Newer Older
1
2
/****************************************************************************
**
3
** Copyright (c) 2014 Digia Plc and/or its subsidiary(-ies).
hjk's avatar
hjk committed
4
** Contact: http://www.qt-project.org/legal
5
**
hjk's avatar
hjk committed
6
** This file is part of Qt Creator
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
**
**
** 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.
// **********************************************************************

/*!
26
    \contentspage {Qt Creator Manual}
27
28
    \previouspage creator-debugging-example.html
    \page creator-qml-debugging-example.html
29
    \nextpage creator-troubleshooting-debugging.html
30
31
32
33

    \title Debugging a Qt Quick Example Application

    This section uses the
34
    \l{QML Advanced Tutorial}{Same Game}
35
    example application to illustrate how to debug Qt Quick applications in the
36
37
38
39
40
41
42
43
44
45
    \gui 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

46
        \li To look at the code that starts a new game, place a breakpoint in
47
48
            samegame.qml by clicking between the line number and the window
            border on the line where where the \c startNewGame() function is
49
            called (1).
50
51
52
53
54
55

            \image qtquick-example-setting-breakpoint1.png

            The red circle indicates that a breakpoint is now set on that line
            number.

56
        \li Select \gui {Debug > Start Debugging > Start Debugging} or press
57
58
            \key{F5}.

59
        \li Once the Same Game application starts, click the \gui {New Game}
60
61
            button to start a new game.

62
        \li When the debugger hits the breakpoint, it interrupts the
63
            application. \QC displays the nested function calls leading to the
64
            current position as a call stack trace (1).
65
66
67

            \image qtquick-example-setting-breakpoint2.png

68
        \li Click the
69
            \inlineimage qtcreator-debug-button-step-into.png
70
71
72
73
74
75
            (\gui {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

76
        \li Examine the local variables in the \gui {Locals and Expressions}
77
78
79
            view. Step through the code to see how the information changes in
            the view.

80
        \li Add a breakpoint at the end of the \c {startNewGame()} function, and
81
82
83
84
85
            click \inlineimage qtcreator-debugging-continue.png
            (\gui Continue) to hit the breakpoint.

            \image qtquick-example-setting-breakpoint3.png

86
87
        \li To execute JavaScript commands in the current context, open the
            \gui {QML/JS Console} output pane.
88

89
        \li To change the score to 1000, enter \c{gameCanvas.score = 1000}
90
91
92
93
            in the console.

            \image qtquick-example-script-console.png

94
        \li To remove a breakpoint, right-click it and select
95
96
            \gui {Delete Breakpoint}.

97
        \li Select the \gui {Locals and Expressions} tab to explore the object
98
            structure at runtime:
99
100
101

            \image qtquick-example-qml-inspector.png

102
        \li Click
103
104
105
106
            \inlineimage qml-inspector-app-on-top.png
            (\gui {Show Application on Top}) to keep the application visible
            while you interact with the debugger.

107
        \li Click
108
109
            \inlineimage qml-inspector-select-button.png
            (\gui Select) to activate selection mode and then click the
110
            \gui {Quit} button to move into the \gui ButtonLabel component
111
            in the \gui {QML/JS Console} and the code editor.
112

113
        \li In the \gui {Locals and Expressions} view, double-click the value of
114
            the \c text property to change it temporarily from \gui {Quit} to
115
116
            \gui {End Game}.

117
118
            \image qtquick-example-property-values.png

119
120
121
122
123
124
            When you select an element, the cursor moves to it in the code
            editor, where you can change the value permanently.

    \endlist

*/