Qt Quick 프로젝트 디버깅

JavaScript 함수를 디버깅하고, JavaScript 식을 실행하여 UI 상태에 대한 정보를 얻으며, QML 속성과 JavaScript 변수를 검사하고, 런타임 중에 해당 값을 일시적으로 변경할 수 있습니다.

Qt Quick 프로젝트 디버깅 방법에 대한 예제는 튜토리얼: Qt Quick 디버깅을 참조하십시오.

QML 디버깅 설정

Qt Quick 프로젝트에 대한 디버깅 설정 과정은 프로젝트 유형 에 따라 다릅니다: Qt Quick UI Prototype 또는 Qt Quick Application, 그리고 Qt 버전에 따라 다릅니다.

Qt Quick UI 프로젝트 디버깅

Qt Quick UI 프로젝트(.qmlproject)를 디버그하려면, ‘ Run Settings ’ > ‘ Debugger Settings ’ > ‘ QML debugger ’에서 ‘ Automatic ’ 또는 ‘ Enabled ’를 선택하십시오.

Qt Quick 애플리케이션 디버깅

Qt Quick 애플리케이션을 디버그하려면:

1. QML 디버깅을 지원하는 빌드 구성을 생성하려면 Projects > Build Settings 로 이동합니다.
2. QML debugging and profiling 에서 ‘ Enable ’을 선택합니다.

   

   참고: 디버깅을 수행하려면 TCP 포트에서 소켓을 열어야 하며, 이는 보안 위험을 초래할 수 있습니다. 인터넷상의 누구든지 디버깅 중인 애플리케이션에 연결하여 임의의 JavaScript 함수를 실행할 수 있습니다. 따라서 해당 포트가 방화벽에 의해 적절히 보호되고 있는지 반드시 확인해야 합니다.

3. Run Settings > Debugger settings > QML debugger 에서 Automatic 또는 Enabled 를 선택하여 실행 중인 애플리케이션에 대한 QML 디버깅을 활성화하십시오.

   애플리케이션의 C++ 및 QML 부분을 동시에 디버그하려면, C++ debugger 에서 Automatic 또는 Enabled 도 선택하십시오.

4. Build 로 이동하여 Rebuild Project 를 선택하면 프로젝트를 정리하고 다시 빌드할 수 있습니다.
5. 기기에서 애플리케이션을 디버그하려면, 디버깅을 시작하기 전에 기기에 Qt 라이브러리가 설치되어 있는지 확인하고 기기에 해당하는 키트를 선택하십시오.

기본값 사용

Preferences > Build & Run > Default Build Properties 에서 QML 디버깅을 전역적으로 활성화하거나 비활성화할 수 있습니다.

QML debugging 필드의 값은 새 빌드 구성을 생성할 때 어떤 동작이 수행될지를 결정합니다. Enable 및 Disable 값은 생성하는 빌드 구성의 유형에 관계없이 새 빌드 구성에 대해 QML 디버깅을 해당 값으로 명시적으로 설정합니다.

Use Project Default Debug, 또는 과 같이 값이 빌드 구성 유형에 따라 달라지게 합니다. Profile ReleaseCMake나 qmake를 빌드 시스템으로 사용할 경우, 디버그 및 프로파일 빌드 구성에서는 QML 디버깅이 활성화됩니다. 그러나 릴리스 빌드 구성에는 QML 디버깅이 포함되지 않습니다. 디버깅 기능은 애플리케이션의 보안 취약점을 유발할 수 있기 때문입니다.

Projects > Build Settings > QML debugging and profiling 에 있는 Default 옵션은 기존에 이미 구성된 CMake 빌드 디렉터리를 그대로 유지합니다. 또한, 이 옵션을 사용하면 강제 변경 없이 기존 빌드를 Qt Creator 로 가져올 수 있으므로, 예를 들어 프로젝트를 완전히 다시 빌드해야 하는 걱정을 할 필요가 없습니다. 나중에 Qt Creator 외부에서 빌드 구성을 변경하더라도, 원하는 대로 유지됩니다.

Preferences > Build & Run > Default Build Properties 의 전역 설정과 빌드 구성 간의 상호작용에 몇 가지 알려진 문제가 있습니다. 예를 들어, qmake의 경우 전역 설정은 키트를 활성화할 때 자동으로 생성되는 빌드 구성에만 영향을 미칩니다. 또한 CMake는 전역 설정을 무시합니다.

QML 디버깅 시작

애플리케이션을 시작하려면 ‘ Debug ’ > ‘ Start Debugging ’ > ‘ Start Debugging of Startup Project ’을 선택하거나 F5 키를 누르십시오. 애플리케이션이 실행되면 평소와 같이 동작하고 수행됩니다. 그런 다음 다음 작업을 수행할 수 있습니다:

• JavaScript 함수 디버깅
• JavaScript 표현식을 실행하여 애플리케이션 상태에 대한 정보를 확인
• QML 속성과 자바스크립트 변수를 검사하고 런타임 중에 일시적으로 변경

이미 실행 중인 애플리케이션을 디버그하려면:

1. 적절한 구성 매개변수를 사용하여 애플리케이션을 빌드합니다( Qt Creator 로 애플리케이션을 빌드하는 경우, 자동으로 올바른 구성이 사용됩니다):
   • CMake를 사용할 경우, ` CMakeLists.txt ` 파일에 ` target_compile_definitions ` 명령어가 정의되어 있습니다: target_compile_definitions(myapp PRIVATE QT_QML_DEBUG)

     여기서 myapp는 디버깅할 애플리케이션입니다.

   • qmake를 사용할 경우, .pro 파일의 CONFIG 속성에 다음 값이 정의됩니다: CONFIG += qml_debug
2. 다음 인수를 사용하여 애플리케이션을 시작합니다:

   -qmljsdebugger=port:<port>[,host:<ip address>][,block]

   여기서 port (필수)는 디버깅 포트를 지정하고, ip address (선택 사항)은 애플리케이션이 실행 중인 호스트의 IP 주소를 지정하며, block (선택 사항)은 디버그 클라이언트가 서버에 연결될 때까지 애플리케이션이 실행되지 않도록 합니다. 이를 통해 시작 시점부터 디버깅이 가능해집니다.

   참고: 중단점을설정할 수 있는 것은 애플리케이션이 블록 모드로 시작된 경우에만 가능합니다.

3. Debug > Start Debugging > Attach to QML Port 로 이동합니다.

   디버깅할 애플리케이션이 실행 중인 기기에 대해 구성된 키트를 선택하십시오. 사용할 포트 번호는 애플리케이션이 시작될 때 표준 출력에 표시됩니다.

JavaScript 함수 디버깅

Qt Creator 의 Debug 모드를 사용하여 디버깅 중에 애플리케이션의 상태를 확인할 수 있습니다. 다음 방법을 통해 디버거와 상호 작용할 수 있습니다:

• 호출 스택 추적 보기
• 중단점 설정
• 로컬 변수 및 함수 매개변수 확인
• 식 평가

항목 검사

애플리케이션이 실행 중일 때, ‘ Locals ’ 뷰를 사용하여 QML 항목 구조를 탐색할 수 있습니다.

디버거를 사용하는 동안에도 애플리케이션을 계속 볼 수 있도록 하려면 ‘ Debug ’ > ‘ Show Application on Top ’을 선택하십시오.

Locals 뷰에서 QML 항목을 다음과 같은 방법으로 볼 수 있습니다:

• 객체 트리에서 해당 항목을 확장합니다.
• 코드 편집기에서 항목을 선택합니다.
• Debug > Select 로 이동하여 선택 모드를 활성화한 다음, 실행 중인 애플리케이션에서 항목을 선택합니다.

소스 코드를 편집하지 않고 속성 값을 일시적으로 변경하려면 해당 속성을 더블 클릭한 후 새 값을 입력하십시오. 실행 중인 애플리케이션에서 결과를 확인할 수 있습니다.

사용자 인터페이스 검사

복잡한 애플리케이션을 디버깅할 때, 항목이 정의된 코드 위치로 바로 이동할 수 있습니다.

선택 모드에서는 실행 중인 애플리케이션에서 항목을 선택하여 코드 내 해당 항목의 정의 위치로 이동할 수 있습니다. 선택한 항목의 속성은 ‘ Locals ’ 뷰에 표시됩니다.

실행 중인 애플리케이션에서 항목 계층 구조를 볼 수도 있습니다.

실행 중인 애플리케이션에서 항목을 두 번 클릭하면 커서 위치의 항목 스택을 순차적으로 탐색할 수 있습니다.

선택 모드를 종료하려면 ‘ Select ’ 메뉴 항목을 토글하십시오.

Qt QML Viewer 에서 실행 중인 애플리케이션을 최전면으로 이동하려면 ‘ Debug ’ > ‘ Show Application on Top ’을 선택하십시오.

JavaScript 표현식 실행

애플리케이션이 중단점(breakpoint)에 의해 일시 중지되면, 디버그 콘솔( QML Debugger Console )을 사용하여 현재 컨텍스트에서 JavaScript 표현식을 실행할 수 있습니다. 디버그 콘솔을 열려면 ‘ View ’ > ‘ Output ’ > ‘ QML Debugger Console ’을 선택하십시오.

소스 코드를 편집하지 않고도 속성 값을 일시적으로 변경한 후, 실행 중인 애플리케이션에서 결과를 확인할 수 있습니다. 코드에서 속성 값을 영구적으로 변경할 수도 있습니다.

런타임에 QML 변경 사항 적용

QML Debugger Console 나 Locals, Expression 뷰에서 속성 값을 변경하면 실행 중인 애플리케이션에서는 즉시 반영되지만, 소스 코드에는 반영되지 않습니다.