qtquick-debugger-example.qdoc 4.79 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
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
**
** Contact: Nokia Corporation (qt-info@nokia.com)
**
**
** 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
** Nokia at qt-info@nokia.com.
**
****************************************************************************/

// **********************************************************************
// 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-example.html
    \page creator-qml-debugging-example.html
32
    \nextpage creator-troubleshooting-debugging.html
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

    \title Debugging a Qt Quick Example Application

    This section uses the
    \l{http://doc.qt.nokia.com/4.7/demos-declarative-samegame.html}{Same Game}
    demo application to illustrate how to debug Qt Quick applications in the
    \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

        \o  To look at the code that starts a new game, place a breakpoint in
            samegame.qml by clicking between the line number and the window
            border on the line where where the \c startNewGame() function is
            called.

            \image qtquick-example-setting-breakpoint1.png

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

        \o  Select \gui {Debug > Start Debugging > Start Debugging} or press
            \key{F5}.

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

        \o  When the debugger hits the breakpoint, it interrupts the
            application. \QC displays the nested function calls leading to the
            current position as a call stack trace. To view the stack, select
            the \gui Stack tab.

            \image qtquick-example-setting-breakpoint2.png

        \o  Click the
            \inlineimage qml-inspector-step-into.png
            (\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

        \o  Examine the local variables in the \gui {Locals and Expressions}
            view. Step through the code to see how the information changes in
            the view.

        \o  Add a breakpoint at the end of the \c {startNewGame()} function, and
            click \inlineimage qtcreator-debugging-continue.png
            (\gui Continue) to hit the breakpoint.

            \image qtquick-example-setting-breakpoint3.png

        \o  To execute JavaScript commands in the current context, select the
            \gui {QML Script Console} tab.

        \o  To change the score to 1000, enter \c{gameCanvas.score = 1000}
            in the console.

            \image qtquick-example-script-console.png

        \o  To remove a breakpoint, right-click it and select
            \gui {Delete Breakpoint}.

        \o  Select the \gui {QML Inspector} tab to explore the object structure
            at runtime:

            \image qtquick-example-qml-inspector.png

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

        \o  Click
            \inlineimage qml-inspector-select-button.png
            (\gui Select) to activate selection mode and then click the
            \gui {New Game} button to move into the \gui newGameButton component
            in the \gui {QML Script Console} and the code editor.

            \image qtquick-example-property-values.png

        \o  In the \gui {QML Inspector} view, double-click the value of the
            \c text property to change it temporarily from \gui {Quit} to
            \gui {End Game}.

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

    \endlist

*/