diff --git a/doc/images/qml-observer-view.png b/doc/images/qml-observer-view.png
index eabbee88118e50409409849de1224629b0fb8576..6fef32c77bbf949626c97b28740e4d0453da1338 100644
Binary files a/doc/images/qml-observer-view.png and b/doc/images/qml-observer-view.png differ
diff --git a/doc/images/qml-script-console.png b/doc/images/qml-script-console.png
index 85b5f584d9144611d62dedfc63b4aa09d03a1859..29751f91fd6591bedba5a3575ccb866146660fb1 100644
Binary files a/doc/images/qml-script-console.png and b/doc/images/qml-script-console.png differ
diff --git a/doc/images/qtquick-debugging-settings.png b/doc/images/qtquick-debugging-settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..67420059f2043bd12a20fab2835acf20f6f233d4
Binary files /dev/null and b/doc/images/qtquick-debugging-settings.png differ
diff --git a/doc/images/qtquick-example-children.png b/doc/images/qtquick-example-children.png
new file mode 100644
index 0000000000000000000000000000000000000000..6169de99ab42ccdd78cb8f2372a3c902c4e789c1
Binary files /dev/null and b/doc/images/qtquick-example-children.png differ
diff --git a/doc/src/debugger/qtquick-debugging.qdoc b/doc/src/debugger/qtquick-debugging.qdoc
index 1feaede11cf06688884d0fcdb5bc7acc9fb7f2bf..6176ba13c7a0482515f6e1567365b9a8a93dca33 100644
--- a/doc/src/debugger/qtquick-debugging.qdoc
+++ b/doc/src/debugger/qtquick-debugging.qdoc
@@ -41,10 +41,14 @@
Qt 4.7.4, or later, libraries on devices. To debug applications on Symbian
devices, you must install also QML Viewer on them.
+ For an example of how to debug Qt Quick Projects, see
+ \l{Debugging a Qt Quick Example Application}.
+
\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, and the Qt version used.
+ \l{Creating Qt Quick Projects}{type of the project}: Qt Quick UI or Qt Quick
+ Application, and the Qt version used.
To debug Qt Quick UI projects:
@@ -62,7 +66,8 @@
\list 1
- \o Select \gui Projects, and then select the
+ \o Debugging is enabled by default for Qt 4.8, or later. For Qt 4.7,
+ select \gui Projects, and then select the
\gui {Enable QML debugging} check box in the \gui qmake section
in \gui {Build Steps}.
@@ -83,17 +88,20 @@
\o Select \gui {Build > Rebuild Project} to clean and rebuild the
project.
- \endlist
+ \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.
- 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.
+ \endlist
\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}.
+ \image qtquick-debugging-settings.png
+
\section1 Starting QML Debugging
To start the application, choose \gui {Debug > Start Debugging >
@@ -104,25 +112,43 @@
\o Debug JavaScript functions
- \o Preview QML changes at runtime
+ \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
- \o Inspect QML at runtime
+ \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.
\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:
+ application while debugging. You can interact with the debugger by:
\list
- \o \l{Setting Breakpoints}
+ \o \l{Setting Breakpoints}{Setting breakpoints}
- \o \l{Viewing Call Stack Trace}
+ \o \l{Viewing Call Stack Trace}{Viewing call stack trace}
- \o \l{Locals and Expressions}
+ \o \l{Locals and Expressions}{Viewing locals and expressions}
\endlist
@@ -135,10 +161,10 @@
\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.
+ the state or your application. You can change property values temporarily,
+ without editing the source, and view the results in the running application.
- You can see the current value of a property by hovering over it in the code
- editor.
+ You can change the property values permanently in the code editor.
\section1 Applying QML Changes at Runtime
@@ -148,6 +174,10 @@
\inlineimage qml-observer-bar-reload.png "Apply Changes on Save button"
on the toolbar.
+ 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.
+
\section1 Inspecting QML at Runtime
While the application is running, you can use the \gui {QML Inspector} view
@@ -158,6 +188,40 @@
\image qml-observer-view.png "QML Inspector view"
+ 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
+
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,
@@ -190,8 +254,6 @@
To move the application running in \QQV to the front, select the
\gui {Show Application on Top} button.
- \section1 Debugging Animations
-
To play and pause animations in the running application, select
\inlineimage qml-inspector-play.png
and