Debug Qt Quick applications

You can debug Qt Quick applications that contain both QML and C/C++ code with the QML debugger and the debugger for your operating system. Usually, you use GDB on Linux and macOS or the Visual Studio Windows debugger on Windows.

When using the QML debugger, you can:

• Show variables including the This variable
• Manipulate values of variables
• Add watch expressions
• Add conditional breakpoints
• Add expression evaluation

Launch and debug applications

To debug only the QML code in an application, you can first start the application and then attach the QML debugger to it.

To launch and debug Qt Quick applications:

1. Create a launch.json file for the project. For more information, see Debug Qt applications.
2. Select QML debugger.
3. Select the Qt: QML: Launch debug configuration.

The launch debug configuration adds the following lines to the launch.json file:

"configurations": [
    {
        "name": "Qt: QML: Launch",
        "type": "qml",
        "request": "launch",
        "program": "${command:cmake.launchTargetPath}"
    },
    {
        "name": "Qt: QML: Attach by port",
        "type": "qml",
        "request": "attach",
        "host": "localhost",
        "port": "^\"Custom port or \\${command:qt-qml.debugPort} for compound usage\""
    }
]

Attach to running applications

To only debug the QML code in an application, it is faster to attach the debugger to a running application using a fixed port number than to have Qt Extension for VS Code first start the application and then attach the QML debugger to it.

To debug only QML code:

1. Create a launch.json file for the project. For more information, see Debug Qt applications.
2. Select Add Configuration, and then select the Qt: QML: Attach by port debug configuration.
3. In the Terminal, start the application with the following arguments:

   <your_executable_path> -qmljsdebugger=host:<IP_address>,port:<port_number>,block,services:DebugMessages,QmlDebugger,V8Debugger,QmlInspector

   Where IP_address is the IP address of the host where the application is running, port_number is the debugging port, and block prevents the application from running until the debug client connects to the server. This enables debugging from the start.

4. Set the port number as the value of the port option in the launch.json file:

   "configurations": [
       {
           "name": "Qt: QML: Attach by port",
           "type": "qml",
           "request": "attach",
           "host": "localhost",
           "port": "<port_number>"
       },

Set build folders

If a build folder is outside the workspace folder, Qt Extension for VS Code needs to know where it is to find QRC files that match virtual and psychical QML files. To set build folders, add them to the Qt: QML: Launch or Qt: QML: Attach by port debug configuration as values of buildDirs.

For example:

"configurations": [
    {
        "name": "Qt: QML: Launch",
        "type": "qml",
        "request": "launch",
        "program": "${command:cmake.launchTargetPath}",
        "buildDirs": [
             "<my_build_folder_outside_workspace>",
             "<my_build_folder_outside_workspace_2>",
         ]
    }
]

Override default arguments

To override default debugger arguments, add arguments to the Qt: QML: Launch or Qt: QML: Attach by port debug configuration as values of debuggerArgs.

For example:

"configurations": [
    {
        "name": "Qt: QML: Launch",
        "type": "qml",
        "request": "launch",
        "program": "${command:cmake.launchTargetPath}",
        "debuggerArgs": "-qmljsdebugger=<arguments>",
    }
]

Pass arguments to the executable

To pass arguments to the executable, add them to the Qt: QML: Launch or Qt: QML: Attach by port debug configuration as values of args.

For example:

"configurations": [
    {
        "name": "Qt: QML: Launch",
        "type": "qml",
        "request": "launch",
        "program": "${command:cmake.launchTargetPath}",
        "args": [
            "<argument>",
            "<argument>    <argument>",
        ]
    }
]

Debug mixed C/C++ and QML code

You can create a debug configuration that first starts an application and then attaches both the QML and C/C++ debugger to it using a port number that the Qt: Acquire Port pre-launch task acquires.

To debug a Qt Quick application that contains both C/C++ and QML code:

1. Open a launch.json file. For more information, see Debug Qt applications.
2. Select Add Configuration, and then select the Qt: Debug with cppdbg and QML debugger or Qt: Debug with cppvsdbg and QML debugger (Windows) debug configuration that matches your debugger.
3. Add a compound launch and pre-launch task for C++/QML debugging to the launch.json file:Linux and macOS Windows

   "compounds": [
           {
               "name": "C++/QML",
               "configurations": ["Qt: Debug with cppdbg and QML debugger", "Qt: QML: Attach by port"],
               "preLaunchTask": "Qt: Acquire Port",
           }
       ]

   "compounds": [
           {
               "name": "C++/QML",
               "configurations": ["Qt: Debug with cppvsdbg and QML debugger (Windows)", "Qt: QML: Attach by port"],
               "preLaunchTask": "Qt: Acquire Port",
           }
       ]