How to debug qml in visual studio?

This new debugging feature of the Qt VS Tools integrates with the QML debugging infrastructure, a part of the Qt QML module which provides services for debugging, inspecting, and profiling applications via a TCP port. To extend the Visual Studio debugger with features of the QML debugging infrastructure, a Visual Studio QML debug engine is provided. This debug engine consists, for the most part, of implementations of interfaces from the Active Debugging 7 (AD7) extensibility framework for the Visual Studio debugger.

If a Qt project contains any QML resource files, starting a debug session (e.g. by pressing F5), besides launching the native application, now also connects to the QML debugging infrastructure of that application. This can be seen in the Processes window of the Visual Studio debugger: two processes are listed, a native process that corresponds to the actual physical process created for the C++ debugging session, and a QML process, which does not correspond to any physical process that is running on the machine, but rather represents the connection to the QML debugging runtime within the native process.

Since both a native process and a QML process are present, it is possible to request breakpoints both in C++ or QML code. The Visual Studio debugger will forward requests to the appropriate debug engine. As usual, a filled circular breakpoint marker in QML code indicates a valid breakpoint; this means that a breakpoint request for that file position has been sent to, and confirmed by the QML runtime.

When a breakpoint is hit, Visual Studio will show the current state of the call stack. Unlike other scenarios of debugging applications that use different languages (e.g. .NET + Native debugging), the QML debug engine does not provide true mixed mode debugging. It runs concurrently with the native debug engine and, from the point of view of the Visual Studio debugger, it is not related to the native process. This means that, even though it is possible to debug both C++ and QML in the same debugging session, the stack that is shown when a QML breakpoint is hit will only include QML function calls -- the C++ context of those calls will not be available.

As in the case of native debugging, while in break mode, it is possible to view and modify the values of local variables, in the context of the currently active call stack frame, as well as create watches for any variable or expression. The Immediate window is also available for evaluation of any expression in the context of the current stack frame.

Moving the mouse over a QML expression pops up an instant watch window (or "DataTip"). The value of that expression in the current context is displayed and can also be modified.

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. To debug Qt Quick UI projects, select the Enable QML check box in the Debugger Settings in Projects mode Run Settings.

To debug Qt Quick Applications:

To debug both the C++ and QML parts of your application at the same time, select the Enable C++ and Enable QML checkboxes for both languages in the Debugger Settings section in the project Run Settings.

To start the application, choose Debug > Start Debugging > Start Debugging of Startup Project or press F5. Once the application starts running, it behaves and performs as usual. You can then perform the following tasks:

To debug already running applications:

You can use the Qt Creator Debug mode to inspect the state of your application while debugging. You can interact with the debugger by:

While the application is running, you can use the Locals view to explore the QML item structure.

To keep the application visible while you interact with the debugger, select Debug > Show Application on Top.

You can view a QML item in the Locals view in the following ways:

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 debug complex applications, you can jump to the position in code where an item is defined.

In the selection mode, you can click items in the running application to jump to their definitions in the code. The properties of the selected item are displayed in the Locals view.

The Select tool will be enabled either if your application is using Qt 5.7 or later, or if your application is using an earlier version of Qt and is based on the QQuickView class. You can also view the item hierarchy in the running application:

Double-click an item in the running application to cycle through the item stack at the cursor position.

To switch out of the selection mode, toggle the Select menu item.

To move the application running in Qt QML Viewer to the front, select Debug > Show Application on Top.

When the application is interrupted by a breakpoint, you can use the QML Debugger Console to execute JavaScript expressions in the current context. To open it, choose View > Output > QML Debugger Console.

To enable QML debugging for a project, select Extensions > Qt VS Tools > Qt Project Settings > QML > Enable QML Debugging > Yes. Select OK to save the project settings.

A QML debug engine extends the Visual Studio debugger with features of the QML debugging infrastructure, which is a part of the Qt QML module that provides services for debugging, inspecting, and profiling applications via a TCP port. The debug engine implements interfaces from the Active Debugging 7 (AD7) extensibility framework for the Visual Studio debugger.

If a Qt project contains QML resource files, starting a debugging session (for example, by pressing F5) launches the native application and connects to the QML debugging infrastructure of that application. You can see this in the Processes window of the Visual Studio debugger. It lists two processes: a native process and a QML process. The native process corresponds to the actual physical process created for the C++ debugging session. The QML process does not correspond to any physical process that is running on the machine, but represents the connection to the QML debugging runtime within the native process.

The presence of both a native process and a QML process enables setting breakpoints both in C++ or QML code. The Visual Studio debugger forwards breakpoint requests to the appropriate debug engine. A filled circular breakpoint marker in QML code indicates a valid breakpoint. This means that a breakpoint request for that file position was sent to the QML runtime and was confirmed by it.

When a breakpoint is hit, Visual Studio shows the current state of the call stack. Unlike other scenarios of debugging applications that mix several languages, such as .NET and native debugging, the QML debug engine does not provide true mixed mode debugging. It runs concurrently with the native debug engine and is not considered to be related to the native process by the Visual Studio debugger. Therefore, even though you can debug both C++ and QML in the same debugging session, the stack that is shown when a QML breakpoint is hit includes only QML function calls. The C++ context of those calls will not be available.

As in the case of native debugging, while in break mode, it is possible to view and modify the values of local variables in the context of the currently active call stack frame, as well as to create watches for any variable or expression. In the Immediate window, you can evaluate any expression in the context of the current stack frame.

Move the mouse over a QML expression to display an instant watch window. The value of that expression in the current context is displayed and can be modified.

To enable QML debugging for a project, select Extensions > Qt VS Tools > Qt Project Settings > QML > Enable QML Debugging > Yes. Select OK to save the project settings.

To disable processing of all QML debug events by the QML debug engine, select Extensions > Qt VS Tools > Options > Qt General > QML Debugging, and set Process debug events to False. This effectively excludes the QML debug engine from the debugging environment and disables debugging of QML code for all projects.

🏠 Homepage

This is a beta release. It may contain bugs and problems.

Please be patient while using it and report back any problem you have encountered to https://github.com/orcun-gokbulut/qml-debug/issuess

Thank you for using Qml-Debug Beta.

Short Description: QML Debuger for VSCode.

Detailed Description: Debug Adapter Protocol (DAP), which is used by Visual Studio Code to interface with various debuggers, implementation for Qt QML debugger.

https://microsoft.github.io/debug-adapter-protocol/

Right now only attach mode debugging is supported which means you have to launch your application (by hand or through another Visual Studio Code launch configuration) and then attach Qml Debugger.

This limitation will be lifted in future releases. Qml Debug will eventually gain the ability to launch your application.

Attach mode attaches Qml Debugger in the already running application instance.

Sample launch.json Configuration:

Configuration Properties

In order to Qml Debuger find your source code, you should have one or more path matching options in your configuration. These mapping tuples are contained in configuration's path property.

Example:

In order to debug your Qml based application in attach mode you have to start your binary with debug parameters;

These parameters will instruct Qt to load necessary debugger plugins and extensions. On launch mode Qml Debugger extension will add these paramters automaticly but in attach mode you have to add it yourself when you are launching your application by hand.

You can also use VSCode launch.json configuration to append the parameters by adding flowing lines to your configration;;

If you want use multiple debugger (C++ and Qml) at the same time you should crate compatable one Qml Debug configuıration and one cppdbg configuration then combine them into launch compound.

You should make sure that cppdbg launch configration launches application with debugging command line arguments with correct hostname and port values that matches with your Qml Debug launch configuration.

Command Line Arguments:

-qmljsdebugger=host:localhost,port:12150,services:DebugMessages,QmlDebugger,V8Debugger

Launch Configuration:

"host": "localhost", "port": 12150,

Example compund launch configration;

Project is still in development. Current version is fully functional but unstable with lots of potential bugs. In addition to that, there are rooms for improvements in various places. Therefore, still work in progress...

👤 Y. Orçun Gökbulut

Contributions, issues and feature requests are welcome!Feel free to check issues page. You can also take a look at the contributing guide.

• Install the Felgo Developer App for iOS or Android.
• Start the app on your mobile device and note the “Dev ID”
• Enter your Dev ID in the VS Code command input.
• The device now connects to the current session and you can use it for a live preview of your opened project.