// Copyright (C) 2026 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only

/*!
    \page creator-qml-debugging-example.html
    \previouspage creator-tutorials.html
    \nextpage creator-how-tos.html

    \ingroup creator-tutorials

    \keyword {Debugging a Qt Quick Application}
    \title Tutorial: Qt Quick debugging

    \brief How to debug a Qt Quick application.

    This tutorial uses the example application that the \uicontrol {New Project}
    wizard generates to illustrate how to debug Qt Quick applications in the
    \uicontrol Debug mode. For a tutorial that describes the example application,
    see \l {Tutorial: Qt Quick application}.

    For more information about all the options you have, see
    \l{Debugging Qt Quick projects}.

    The example application illustrates basic concepts of \l {Qt Quick}. Open the
    example project in \QC to debug it:

    \list 1

        \li To look at the code that reacts to button clicks, place a breakpoint
            in \c Main.qml by clicking between the line number and the window
            border on the line where the \c onClicked signal handler is
            triggered.

            \image {qtquick-example-setting-breakpoint1.webp} {Breakpoint in the code editor}

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

        \li Go to \uicontrol Debug > \uicontrol {Start Debugging} >
            \uicontrol {Start Debugging of Startup Project}, or press
            \key{F5}.

        \li Once the application starts, select \uicontrol {Light mode} to switch
            modes.

            \image {qtquick-tutorial.webp} {Qt Quick Application created with the new project wizard}

        \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.

            \image {qtquick-example-setting-breakpoint2.webp} {Debugger view}

        \li Select \inlineimage {icons/debugger_stepinto_small.png} {Step Into}
            (\uicontrol {Step Into}) on the toolbar or select \key F11 to
            step into the code in the stack.

        \li Examine the local variables in the \uicontrol Locals
            view. Step through the code to see how the information changes in
            the view.
    \endlist

    \section1 Examine local variables

    In the \uicontrol Locals view, explore the object structure at
    runtime.

    \image {qtquick-example-qml-locals.webp} {Locals view}

    Double-click the value of a property to change it.

    \section1 Remove a breakpoint

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

    \section1 Show application on top

    Go to \uicontrol Debug > \uicontrol {Show Application on Top} to
    keep the application visible while you interact with the debugger.

    \sa {Tutorial: Qt Quick application}, {Debugging Qt Quick projects}
*/
