Vega Studioを使用して1行ずつデバッグを実行する方法

Vega Studioを使って、VegaアプリやターボモジュールをGDB（GNUデバッガー）でデバッグする方法を紹介します。Vega Studioには、ネイティブコードのデバッグにGDBを使用する組み込みのデバッグ機能があり、実行中のプログラムの検査、ブレークポイントの設定、コードのステップ実行ができます。ターボモジュールは、React Nativeの機能を拡張するネイティブコードコンポーネントです。

Chrome DevToolsのデバッグについては、Chrome DevToolsを使用したアプリのプロファイリングを参照してください。

前提条件

Vega Studioでアプリをデバッグする前に、開発環境と対象デバイスが適切に構成されていることを確認するため、以下のセットアップ要件を完了してください。

1. （任意）VS Codeデバッグドキュメントを確認します。

2. （任意）GDB（GNUデバッガー）について学びます。

3. デバッグターゲット をKepler仮想デバイスまたはFire TV Stickから選択します。

4. ターゲットの開発者モードを有効にします。

   Vega仮想デバイス

   1. VS Codeを開きます。
   2. アクティビティバーからVega Studio拡張機能のアイコンを選択します。
   3. [Devices] に移動します。
   4. Vega仮想デバイスを起動します。
   5. ターミナルを開き、次のコマンドを実行します。

   コードをコピー クリップボードにコピーしました。

   kepler exec vda shell vsm developer-mode enable
   

   Fire TV Stick

   1. Fire TV StickをUSB経由で開発用コンピューターに接続します。
   2. Fire TV Stickでのアプリの実行の手順に沿って、開発者モードを有効にします。

Vega Studioデバッガーの構成

デバッグ構成を設定して、Vega Studioの起動方法とアプリへの接続方法を指定します。クイックセットアップには自動構成を使用し、カスタムデバッグシナリオには手動構成を使用できます。

自動構成

オプション1： 開いているファイルまたは選択したプロジェクトを使用する

1. プロジェクトファイルを開くか、サイドバーから選択します。

2. VS Codeアクティビティバーから [実行とデバッグ] を選択します。

   

3. アプリのデバッグの手順にしたがって設定します。

オプション2： [Show all automatic configurations]を使用する

1. VS Codeアクティビティバーの [実行とデバッグ] に移動します。
2. [Show all automatic debug configurations] をクリックします。

3. 目的のデバッグ構成を選択します。

   

手動構成

1. VS Codeアクティビティバーの [実行とデバッグ] に移動します。
2. [create a launch.json file] をクリックします。
3. プロンプトからKeplerプロジェクトを選択します（プロジェクトが1つしかない場合はスキップしてください）。

4. デバッガーを選択します。

   • Kepler: Kepler向けReact Native（JavaScript/TypeScriptコード）
   • KeplerNative： ターボモジュール用（ネイティブC++コード）

Vega Studioはデフォルト設定でlaunch.jsonファイルを作成します。

ターゲットデバイスの指定

複数のデバイスが接続されている場合は、deviceIdプロパティを設定してターゲットデバイスを指定します。

• "${command:kepler.state.getSelectedDeviceId}" - サイドバーから選択したデバイスを使用します
• "KeplerVirtualDevice" - 特にKepler仮想デバイスを対象にします
• デバイスのシリアルID - 特定の物理デバイスを対象とします

launch.jsonへの構成の追加

既存のlaunch.jsonファイルに構成を追加する方法：

1. アプリのlaunch.jsonファイルを開きます。
2. [構成の追加] ボタンをクリックします。
3. 利用可能なオプションから目的の起動対象を選択します。

4. 変更を保存します。

   

ブレークポイントの設定

コードエディターの行番号の左側の余白をクリックして、アプリにブレークポイントを作成します。

launch.jsonの属性

構成サンプル

Vegaアプリ向けの基本的なReact Native

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "(script) Launch",
            "type": "kepler",
            "request": "launch",
            "keplerMode": "debug",
            "cwd": "${workspaceFolder}",
            "deviceId": "${command:kepler.state.getSelectedDeviceId}",
            "disableAppTimeout": true,
            "perf": {
                "startActivityMonitoring": false
            }
        }
    ]
}

Vegaアプリ向けのマルチデバイスReact Native

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "(script) Launch on selected device",
            "type": "kepler",
            "request": "launch",
            "keplerMode": "debug",
            "cwd": "${workspaceFolder}",
            "deviceId": "${command:kepler.state.getSelectedDeviceId}",
            "disableAppTimeout": true
        },
        {
            "name": "(script) Launch on Vega Virtual Device",
            "type": "kepler",
            "request": "launch",
            "keplerMode": "debug",
            "cwd": "${workspaceFolder}",
            "deviceId": "KeplerVirtualDevice",
            "disableAppTimeout": true
        }
    ]
}

ハイブリッドReact Nativeとターボモジュールのデバッグ

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "(script) Attach",
            "type": "kepler",
            "request": "attach",
            "cwd": "${workspaceFolder}",
            "deviceId": "${command:kepler.state.getSelectedDeviceId}"
        },
        {
            "name": "(native) Attach",
            "type": "keplerNative",
            "request": "attach",
            "cwd": "${workspaceFolder}",
            "deviceId": "${command:kepler.state.getSelectedDeviceId}",
            "debugger": "gdb"
        }
    ],
    "compounds": [
        {
            "name": "Hybrid Debugger",
            "configurations": ["(native) Attach", "(script) Attach"]
        }
    ]
}

構成スニペット

アプリのデバッグ

デバッガーを構成してブレークポイントを設定した後に、選択したターゲットデバイスでアプリのデバッグを開始します。デバッグプロセス自体はいずれのデバイスでも大きな違いはありませんが、デバイスの選択が異なります。

Vega仮想デバイスでのデバッグ

1. サイドバーから[仮想デバイス]を選択します。
2. [実行とデバッグ] に移動します。
3. ドロップダウンから [（script）Launch] 設定を選択します。
4. [再生] アイコンをクリックするか、F5キーを押します。

Vega Studioは、Vega仮想デバイス上でアプリをパッケージ化し、読み込んで実行します。実行がブレークポイントに達すると、VS Codeはデバッグモードに入り、デバッグツールバーが表示されます。

Fire TV Stickでのデバッグ

1. ターゲットとしてFire TV Stickを選択します。
2. [実行とデバッグ] に移動します。
3. ドロップダウンから [（script）Launch] 設定を選択します。
4. [再生] アイコンをクリックするか、F5キーを押します。

Vega Studioは、Fire TV Stick上でアプリをパッケージ化し、読み込んで実行します。実行がブレークポイントに達すると、VS Codeはデバッグモードに入り、デバッグツールバーが表示されます。

デバッグツールバーのアクション

デバッグツールバーには、デバッグセッション中に実行できるアクションが表示されます。

トラブルシューティング

デバッグの問題については、デバッグに関する問題の修正を参照してください。

関連トピック

• Chrome DevToolsを使用したアプリのプロファイリング
• Charles Proxyによるネットワークトラフィックのモニタリング

Last updated: 2025年9月30日