Отладка проектов Qt Quick (QML) в VSCode
Проекты Qt Quick в файлах .qml, помимо кода описания компонентов могут содержать JavaScript код, который может управлять поведением элементов в окне и, в том числе, обращаться к коду нашего проекта, написанного на C++. Для отладки этого кода нам потребуется отдельный отладчик и дополнительная настройка проекта
Сегодня мы рассмотрим отладку проектов Qt Quick (QML) в VSCode.
Мы продолжим использовать проект из предыдущей статьи - https://blog.altuninvv.ru/qt/qt6/отладка-проектов-qt6-в-vscode-с-использованием-gdb
Подготовка проекта к отладке
Прежде чем продолжить, доработаем наш проект, чтобы сделать его чуточку сложней.
Откроем файл Main.qml и изменим код на:
import QtQuick 6.0
import QtQuick.Controls 2.15
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
property int c: 0;
property int a: 0;
property int b: 0;
Column {
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
Button {
width: 60
height: 30
anchors.horizontalCenter: parent.horizontalCenter
text: "Setup"
onClicked: {
a = 7;
b = 6;
console.log("Setup");
}
}
Button {
width: 60
height: 30
anchors.horizontalCenter: parent.horizontalCenter
text: "Start"
onClicked: {
c = a + b;
console.log("Clicked c=",c);
}
}
BusyIndicator {
anchors.horizontalCenter: parent.horizontalCenter
}
}
}Здесь мы добавили три глобальных переменных или свойства для нашего окна:
a
b
cОни будут доступны в любых функциях данного окна.
Так же мы добавили кнопку Setup.
Теперь при нажатии на кнопку Start у нас происходит простое сложение a и b
По умолчанию a и b у нас равны нулю, так что при простом нажатии на кнопку Start результат будет равен 0.
При нажатии на кнопку Setup происходит инициализация переменных a и b, так что при нажатии на кнопку Start результат становится равен 13.
Поставим точку останова на строку.
console.log("Clicked c=",c);Запустим режим отладки нажав F5 и нажмем на кнопку Start в окне нашей программы.
Остановка программы на точке остановки не произойдет!
Для отладки кода расположенного в .qml файлах нужен свой отладчик и своя конфигурация запуска.
Создаем конфигурацию запуска для отладки .qml файлов
Откроем файл launch.json
Добавим в него новый блок:
{
"name": "QML Debug",
"type": "qml",
"request": "launch",
"program": "${command:cmake.launchTargetPath}",
"internalConsoleOptions": "openOnSessionStart",
},В результате файл launch.json примет вид:
{
"version": "0.0.1",
"configurations": [
{
"name": "C++ debug",
"type": "cppdbg",
"request": "launch",
"internalConsoleOptions": "neverOpen",
"program": "${command:cmake.launchTargetPath}",
"stopAtEntry": false,
"cwd": "${fileDirname}",
"environment": [],
"externalConsole": false,
"MIMode": "gdb",
"miDebuggerPath": "gdb",
"miDebuggerArgs": "--quiet",
"filterStdout": true,
"filterStderr": true,
"logging": {
"moduleLoad": false,
"threadExit": false,
"processExit": false,
"engineLogging": false,
"exceptions": false,
"programOutput": true,
"trace": false,
"traceResponse": false
},
},
{
"name": "QML Debug",
"type": "qml",
"request": "launch",
"program": "${command:cmake.launchTargetPath}",
"internalConsoleOptions": "openOnSessionStart",
},
],
}Откроем панель Run and Debug и откроем выпадающий список.
Здесь появилась новая конфигурация запуска - QML Debug
Выберем её и нажмем на запуск:
Будет выполнен запуск проекта.
Если мы сейчас нажмем на кнопку Start у нас несмотря на режим отладки не будет выполнен останов на точке останова.
Для включения отладки QML в программу должен быть встроен дополнительный программный код!
Включение отладки QML в проекте Qt Quick
Для активации режима отладки QML в проекте Qt Quick откроем файл CMakeLists.txt
Добавим строку:
set(CMAKE_CXX_FLAGS_DEBUG "${CMAKE_CXX_FLAGS_DEBUG} -DQT_QML_DEBUG -DQT_DECLARATIVE_DEBUG")После строки
project(testqt1 VERSION 0.1 LANGUAGES CXX)Сохраним файл.
Будет выполнена автоматическая реконфигурация проекта. Если этого не произошло воспользуйтесь панелью CMake.
Еще раз запустим отладку с помощью конфигурации QML Debug.
На этот раз в DEBUG CONSOLE мы увидим строку:
QML debugging is enabled. Only use this in a safe environment.Она означает что у нас активирован режим отладки QML.
Так же может появится окно межсетевого экрана Windows с запросом на доступ к сети для нашей программы и VSCode - разрешим его. Для отладки QML используется сетевые соединения!
Нажмем на кнопку Start в окне программы. Произойдет остановка выполнение программы на строке:
console.log("Clicked c=",c);Так же в панели Run and Debug мы сможем увидеть содержимое локальных переменных!
Отладка с помощью условных точек останова (conditional breakpoint)
Помимо обычных точек останова, которые всегда останавливают программу на заданной строке, мы можем задать условие, при выполнении которого программа будет остановлена на заданной строке.
Допустим, что нам важно поймать момент, когда результат в переменно c будет равен 13.
Для этого мы можем установить условную точку останова (conditional breakpoint).
Удалим старую точку останова.
Щелкнем правой кнопкой мыши на строке:
console.log("Clicked c=",c);Откроется меню:
Выберем пункт Add Conditional Breakpoint…
Откроется панель ввода выражения. Введем
c==13Обратите внимание! Никаких пробелов!
Нажмем Enter
Будет добавлена точка останова. Наведем курсор на иконку:
Здесь мы сразу видим условие останова на контрольной точке.
Обратите внимание! Выставлять такие точки останова всегда нужно после присвоения переменной значения, которое мы проверяем. Т.е. нельзя выставить точку останова на строке:
c = a + b; Так как значение переменной еще не было установлено!
Запустим отладку QML Debug
Сначала просто нажмем на кнопку Start – ничего не произойдет
Перезапустим отладку. На этот раз нажмем на кнопку Setup а потом на Start
Программа будет остановлена на строке
console.log("Clicked c=",c);
Обратите внимание, в режиме отладки QML в консоль не выводятся сообщения, отправленные с помощью:
console.log()Решение этой проблемы мы рассмотрим в следующей статье.
Заключение
Сегодня мы рассмотрели отладку проекта Qt Quick (QML) в VSCode:
Доработали форму нашего проекта, добавив дополнительный код и изменив его логику;
Добавили конфигурацию для запуска отладки в режиме QML;
В файл CMakeLists.txt добавили дополнительные настройки для активации отладки нашего QML в нашем проекте;
Протестировали отладку;
Рассмотрели отладку с помощью условных точек останова (conditional breakpoint) и протестировали её.
В следующей статье мы рассмотрим перенаправление вывода отладочной информации в приложениях Qt6.
Добавить комментарий