QML 애플리케이션 디버깅

QML로 애플리케이션을 개발할 때 발생할 수 있는 문제를 디버깅하는 방법은 다양합니다. 다음 섹션에서는 사용 가능한 디버깅 도구와 그 사용 방법을 설명합니다.

콘솔 API

function f(a, b) {
  console.log("a is ", a, "b is ", b);
}

function f() {
  var x = 12
  console.assert(x == 12, "This will pass");
  console.assert(x > 12, "This will fail");
}

function f() {
    console.time("wholeFunction");
    console.time("firstPart");
    // first part
    console.timeEnd("firstPart");
    // second part
    console.timeEnd("wholeFunction");
}

function f() {
  console.count("f called");
}

function f() {
    console.profile();
    //Call some function that needs to be profiled.
    //Ensure that a client is attached before ending
    //the profiling session.
    console.profileEnd();
}

또는 ` logging category `를 ` console ` 계열 함수 중 하나의 첫 번째 인수로 전달할 수도 있습니다. 자세한 내용은 LoggingCategory 를 참조하십시오.

모듈 임포트 디버깅

QML_IMPORT_TRACE 환경 변수를 설정하면 QML의 임포트 로딩 메커니즘에서 디버그 출력을 활성화할 수 있습니다.

예를 들어, 다음과 같은 간단한 QML 파일의 경우:

import QtQuick

Rectangle { width: 100; height: 100 }

QML Runtime 도구나 QML C++ 애플리케이션을 실행하기 전에 QML_IMPORT_TRACE=1 을 설정하면 다음과 유사한 출력이 표시됩니다:

QQmlImportDatabase::addImportPath "/qt-sdk/imports"
QQmlImportDatabase::addImportPath "/qt-sdk/bin/QMLViewer.app/Contents/MacOS"
QQmlImportDatabase::addToImport 0x106237370 "." -1.-1 File as ""
QQmlImportDatabase::addToImport 0x106237370 "Qt" 4.7 Library as ""
QQmlImportDatabase::resolveType "Rectangle" = "QDeclarativeRectangle"

QML 디버깅 인프라

이 Qt Qml 이 모듈은 TCP 포트나 로컬 소켓을 통해 애플리케이션을 디버깅, 검사 및 프로파일링하는 기능을 제공합니다.

인프라 활성화

애플리케이션을 컴파일할 때 디버깅 인프라를 명시적으로 활성화해야 합니다.

CMake를 사용하는 경우, 명령줄에서 ` cmake `에 ` -DCMAKE_CXX_FLAGS_INIT=-DQT_QML_DEBUG `을 인수로 전달하여 특정 빌드에서만 이 기능을 활성화할 수 있습니다. 또한 CMakeLists.txt 파일에 다음 코드 조각을 추가하여 영구적으로 활성화할 수도 있습니다:

qt_add_executable(MyApp
...
)

target_compile_definitions(MyApp PRIVATE QT_QML_DEBUG)

qmake를 사용하는 경우, 프로젝트의 .pro 파일에 CONFIG+=qml_debug 구성 매개변수를 추가하거나 명령줄에서 인자로 전달할 수 있습니다.

다른 빌드 시스템을 사용하는 경우, 해당 빌드 시스템의 방식을 통해 컴파일러에 QT_QML_DEBUG 정의값을 전달해야 합니다.

응용 프로그램 시작

디버깅을 활성화하려면(시작 시부터 활성화하거나 나중에 디버거를 연결하기 위해) 다음 인수를 사용하여 애플리케이션을 시작하십시오:

-qmljsdebugger=port:<port_from>[,port_to][,host:<ip address>][,block][,file:<local socket>][,services:<comma-separated list of services to enable>]

여기서:

• 필수 인수인 ` port_from `는 디버깅 포트를 지정하거나, ` port_to `가 지정된 경우 포트 범위의 시작 포트를 지정합니다
• 선택 사항인 ` ip address `는 애플리케이션이 실행 중인 호스트의 IP 주소를 지정합니다
• 선택 사항인 ` block `은 디버그 클라이언트가 서버에 연결될 때까지 애플리케이션이 실행되지 않도록 합니다
• 선택 사항인 file 는 로컬 소켓을 지정합니다.
• 선택 사항인 ` services `는 활성화할 서비스를 지정하며, 기본값은 발견된 모든 서비스입니다. ` v4 debug ` 서비스는 JIT를 비활성화한다는 점에 유의하십시오.

애플리케이션이 성공적으로 시작된 후에는 다음 메시지가 표시됩니다:

QML Debugger: Waiting for connection on port <port_number>

또는

QML Debugger: Connecting to socket at <file>

애플리케이션에 연결하기

애플리케이션이 실행 중일 때, 바이너리 프로토콜을 구현하는 IDE나 도구가 열린 포트에 연결할 수 있습니다.

다음과 같은 디버깅 Qt Creator

Qt Creator 는 디버깅 인프라를 사용하여 데스크톱은 물론 원격 장치에서도 QML 애플리케이션을 디버깅, 검사 및 프로파일링합니다. Qt Creator 는 JavaScript 디버깅, 객체 트리 검사 및 QML 엔진의 활동 프로파일링을 위한 통합 클라이언트를 제공합니다. 자세한 내용은 Qt Creator: Qt Quick 프로젝트 디버깅을 참조하십시오.

를 사용한 디버깅 Qt Extension for Visual Studio Code

Qt Extension for Visual Studio Code 는 자바스크립트 디버깅 및 QML 엔진 활동 프로파일링을 위한 통합 클라이언트를 제공합니다. 자세한 내용은 Qt Extension for Visual Studio Code: Debug Qt Quick applications를 참조하십시오.