Visual Studio Code で QML デバッグ

Visual Studio Code 用 Qt Qml Extension の次期 1.5.0 プレリリース において、QML 開発ワークフローに大きな進歩をもたらす機能を発表いたします。このリリースでは、VS Code における QML デバッグの初期サポート が導入されました。これは、軽量でクロスプラットフォームのツールを使用する QML 開発者にとって、長年の要望であった機能が日常的な使用に近づいたことを意味します。

🔍 サポートされる機能

このQMLデバッグサポートの初期リリースでは、以下の機能が利用可能になりました。

• TCPポート経由で実行中のQMLアプリケーションに接続 — リモートまたはローカルのQMLアプリケーションに再起動せずに迅速に接続でき、テストと反復作業を効率化できます。
• コールスタックビューでQMLスタックフレームを検査 — QMLコードが各ステップで何を行っているかを理解し、問題をより効果的にトラブルシューティングできます。
• スタックトレースナビゲーションでファイルと行ベースのソース位置を表示 — コードの関連部分に直接ジャンプでき、デバッグ時の時間を節約できます。
• コードをステップ実行 — コードの実行を完全に制御し、アプリの動作を行単位で理解できます：
  • 続行
  • ステップオーバー
  • ステップイン
  • ステップアウト

🚀 ご利用開始

1. VS Code 用 Qt 拡張機能をインストール（プレリリース版）

まず、Qt Extension for VS Code がインストールされており、Qt Qml 拡張機能のバージョンが 1.5.x 以上であることを確認してください。

インストール方法：

1. VS Code で拡張機能ビューを開きます（Ctrl+Shift+X または ⇧⌘X）。
2. 「Qt Qml」を検索し、The Qt Company が公開している拡張機能を選択します。
3. プレリリースバージョンへ切り替え をクリックします。

🧪 これにより、1.5.0 で導入された QML デバッグ機能にアクセスできるようになります。

2. デバッグ構成を追加

QML デバッグを有効にするには、実行中の QML デバッグサーバーに接続するデバッグ構成が必要です。

🧭 オプション １： 既存の構成に追加するボタンを利用

1. 実行とデバッグパネル（Ctrl+Shift+D）を開きます。
2. 右下にある構成の追加…をクリックします。
3. リストから Qt: QML: Attach by port を選択します。

これにより、.vscode/launch.json ファイルに以下の設定が生成されます。

{
    "configurations": [
        {
            "name": "Qt: QML: Attach by port",
            "type": "qml",
            "request": "attach",
            "host": "localhost",
            "port": "Custom port or ${command:qt-qml.debugPort} for compound usage"
        }
    ]
}

🧭 オプション ２： 手動で追加

上記の設定を .vscode/launch.json に手動で貼り付けることもできます。

アプリケーションを起動する際に使用するポートとホストが一致していることを確認してください。

3. デバッガーを起動

VS Code で以下の項目を選択します。

1. QML に接続 設定を選択します。
2. F5キーを押すか、デバッグの開始 をクリックします。

デバッガーが待機中であることを示す次のようなメッセージが表示されます：

4. デバッグを有効にしてアプリケーションを起動

コマンドラインから、次の引数を使用して Qt アプリケーションを起動します。

<；your-qt-app>； -qmljsdebugger=host:127.0.0.1，port:12150，block，services：DebugMessages，QmlDebugger，V8Debugger，QmlInspector

• host:127.0.0.1→ ローカルホストにバインドします
• port:12150→ launch.json と一致する必要があります
• block→ デバッガーが起動するまで待機します。
• services→ 強力なデバッグ機能を有効にします。
  • DebugMessages
  • QmlDebugger
  • V8Debugger
  • QmlInspector

起動すると、アプリは VS Code で待機しているデバッガーに接続し、実行を再開します。

QML コードと C++ コードの両方をデバッグしたい場合は、こちらのドキュメントをご覧ください。

🔍 サポートされている機能の概要

1. コールスタックビューでQMLスタックフレームを検査

QMLアプリケーションで問題が発生した場合、その原因となった関数呼び出しのシーケンスを理解することが重要です。この機能ではQMLコールスタックを表示することで、開発者は予期しない動作の原因を迅速に特定し、コンテキストを理解し、より適切なデバッグ判断を行うことができます。

QML デバッガーでは、コールスタックビューで QML スタックフレームを直接確認できます。アクティブな QML 関数の構造化された概要が表示され、実行フローを追跡し、アプリケーションが現在の状態に達した経緯を分析できます。

2. ファイル/行ベースのソース位置の表示

効率的なデバッグには、コード内の問題の発生場所を迅速に特定することが重要です。この機能は、実行時情報とソースファイルの間の情報を橋渡しし、スタックトレースから関連するファイルと行に直接移動できるようにします。

デバッガーを使用すると、エディター内でファイルと行に基づくソース位置を表示できます。各スタックフレームには正確な位置メタデータが含まれており、フレームをクリックすると、対応するファイルと行がエディターで開かれ、コード内をスムーズかつ迅速に移動できます。

3. コードのステップ実行

デバッグは、アプリケーションの動作をステップごとに観察することが多くあります。この機能により、実行フローを完全に制御でき、いつでも一時停止して何が起こっているかを調査し、1 ステップずつ実行を継続して問題を理解または特定できます。

デバッガーは、続行、ステップオーバー、ステップイン、ステップアウトのアクションをサポートしています。これらのコマンドを使用すると、実行を再開したり、関数をスキップしたり、関数内に移動したり、以前のコンテキストに戻ったりできます。これらはすべて、QML コードの実行時動作を正確に調査するのに役立ちます。

バグや使いやすさに関する問題が発生した場合は、バグトラッカーまでご報告ください。