forked from qt-creator/qt-creator
419c6de735
The \i and \o commands were replaced with \li and \bold was replaced with \b in QDoc for Qt 5. The \input command was replaced with \include in the docs. Change-Id: I257d1bebb8ebc739ca20e0d29fcf0406ecb14534 Reviewed-by: Oswald Buddenhagen <oswald.buddenhagen@digia.com>
125 lines
4.6 KiB
Plaintext
125 lines
4.6 KiB
Plaintext
/****************************************************************************
|
|
**
|
|
** Copyright (c) 2013 Digia Plc and/or its subsidiary(-ies).
|
|
** Contact: http://www.qt-project.org/legal
|
|
**
|
|
** This file is part of Qt Creator
|
|
**
|
|
**
|
|
** 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-example.html
|
|
\page creator-qml-debugging-example.html
|
|
\nextpage creator-troubleshooting-debugging.html
|
|
|
|
\title Debugging a Qt Quick Example Application
|
|
|
|
This section uses the
|
|
\l{http://qt-project.org/doc/qt-4.8/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
|
|
|
|
\li 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 (1).
|
|
|
|
\image qtquick-example-setting-breakpoint1.png
|
|
|
|
The red circle indicates that a breakpoint is now set on that line
|
|
number.
|
|
|
|
\li Select \gui {Debug > Start Debugging > Start Debugging} or press
|
|
\key{F5}.
|
|
|
|
\li Once the Same Game application starts, click the \gui {New Game}
|
|
button to start a new game.
|
|
|
|
\li 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 (1).
|
|
|
|
\image qtquick-example-setting-breakpoint2.png
|
|
|
|
\li Click the
|
|
\inlineimage qtcreator-debug-button-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
|
|
|
|
\li Examine the local variables in the \gui {Locals and Expressions}
|
|
view. Step through the code to see how the information changes in
|
|
the view.
|
|
|
|
\li 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
|
|
|
|
\li To execute JavaScript commands in the current context, select the
|
|
\gui {Console} tab.
|
|
|
|
\li To change the score to 1000, enter \c{gameCanvas.score = 1000}
|
|
in the console.
|
|
|
|
\image qtquick-example-script-console.png
|
|
|
|
\li To remove a breakpoint, right-click it and select
|
|
\gui {Delete Breakpoint}.
|
|
|
|
\li Select the \gui {Locals and Expressions} tab to explore the object
|
|
structure at runtime:
|
|
|
|
\image qtquick-example-qml-inspector.png
|
|
|
|
\li Click
|
|
\inlineimage qml-inspector-app-on-top.png
|
|
(\gui {Show Application on Top}) to keep the application visible
|
|
while you interact with the debugger.
|
|
|
|
\li Click
|
|
\inlineimage qml-inspector-select-button.png
|
|
(\gui Select) to activate selection mode and then click the
|
|
\gui {Quit} button to move into the \gui ButtonLabel component
|
|
in the \gui {Console} and the code editor.
|
|
|
|
\image qtquick-example-property-values.png
|
|
|
|
\li In the \gui {Locals and Expressions} 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
|
|
|
|
*/
|