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 は、JavaScriptのデバッグおよびQMLエンジンの動作のプロファイリングを行うための統合クライアントを提供します。詳細については、Qt Extension for Visual Studio Code:Qt Quick アプリケーションのデバッグを参照してください。