Doc: move debugger mode topics to a separate folder

Change-Id: I3cef398cabb8d8961507a6208076991c7f407ac6
Reviewed-on: http://codereview.qt-project.org/5607

Reviewed-by: Qt Sanity Bot <qt_sanity_bot@ovi.com>
Reviewed-by: Eike Ziller <eike.ziller@nokia.com>
Reviewed-by: Casper van Donderen <casper.vandonderen@nokia.com>

doc/src/debugger/qtquick-debugging.qdoc

+/****************************************************************************
+**
+** This file is part of Qt Creator
+**
+** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
+**
+** Contact: Nokia Corporation (info@qt.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 info@qt.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-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.
+
+    \section1 Setting Up QML Debugging
+
+    The process of setting up debugging for Qt Quick projects depends on the
+    type of the project: Qt Quick UI or Qt Quick Application.
+
+    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.
+
+        \o  Compile the QML Inspector debugging helper. For more information,
+            see \l{Debugging Helpers for QML}.
+
+    \endlist
+
+    To debug Qt Quick Applications:
+
+        \list 1
+
+        \o  Select \gui Projects, and then select the \gui {Link QML debugging
+            library} check box in \gui {Build Steps}.
+
+            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.
+
+    \endlist
+
+    To debug Qt Quick Applications on devices, install Qt 4.7.4, or later,
+    libraries on devices. Then select the device as the target before you
+    start debugging.
+
+    \section1 Mixed C++/QML Debugging
+
+    To debug both the C++ and QML parts of your application at the same time,
+    select the checkboxes for both languages in the \gui{Run Settings}. However,
+    C++ breakpoints are be ignored until the debugger attaches also to the
+    QML engine.
+
+    \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
+
+        \o  Preview QML changes at runtime
+
+        \o  Inspect QML at runtime
+
+    \endlist
+
+    \section1 Debugging JavaScript Functions
+
+    You can use the \QC \gui Debug mode to inspect the state of your
+    application while debugging. You can interact with the debugger in several
+    ways, as described in the following sections:
+
+    \list
+
+        \o  \l{Setting Breakpoints}
+
+        \o  \l{Viewing Call Stack Trace}
+
+        \o  \l{Locals and Expressions}
+
+    \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
+    the state or your application. For example, property values.
+
+    You can see the current value of a property by hovering over it in the code
+    editor.
+
+    \section1 Applying QML Changes at Runtime
+
+    If you change property values or add properties in the code editor, the
+    changes are updated in the running application when you save them. If live
+    preview is not supported for an element, a message appears. Click
+    \gui Reload to preview the changes.
+
+    Reloading is enabled by default. To disable it, click
+    \inlineimage qml-observer-bar-reload.png "Apply Changes on Save button"
+    on the toolbar.
+
+    \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"
+
+    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.
+
+    \section1 Debugging Animations
+
+    \image qml-observer.png
+
+    To play and pause animations in the running application, select the
+    \gui {Play/Pause Animations} button on the toolbar or \gui {Debugging >
+    Animations > Pause}, or press
+    \key {Ctrl+.}.
+
+    To change the speed at which animations are played, select a value in
+    \gui {Debugging > Animations} or click and hold down the
+    \gui {Play/Pause Animations} button to select a value.
+
+*/