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

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

前提条件

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

（任意）VS Codeデバッグドキュメントを確認します。
（任意）GDB（GNUデバッガー）について学びます。
デバッグターゲット Vega仮想デバイスまたはFire TV Stickから選択します。
ターゲットの開発者モードを有効にします。 Vega仮想デバイス
1. VS Codeを開きます。
2. アクティビティバーからVega Studio拡張機能のアイコンをクリックします。
3. [Devices] に移動します。
4. Vega仮想デバイスを起動します。
5. ターミナルを開き、次のコマンドを実行します。
vega exec vda shell vsm developer-mode enable
Fire TV Stick
1. Fire TV StickをUSB経由で開発用コンピューターに接続します。
2. Fire TV Stickでアプリを実行するの手順に従って、開発者モードを有効にします。

Vega Studioデバッガーの構成

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

自動構成

プロジェクトファイルを開くか、サイドバーから選択します。
VS Codeアクティビティバーから [実行とデバッグ] を選択します。
デバッガータイプを選択します。
- [Vega]：Vega向けReact Native（JavaScript/TypeScriptコード）
- [Vega Native]：ターボモジュール用（ネイティブC++コード）
デバッガーは実行中のアプリにアタッチします。
アプリのデバッグの手順に従います。

手動構成

VS Codeアクティビティバーの [実行とデバッグ] に移動します。
[launch.jsonファイルを作成します] をクリックします。
プロンプトからプロジェクトを選択します（プロジェクトが1つしかない場合はスキップしてください）。
デバッガータイプを選択します。
- [Vega]：Vega向けReact Native（JavaScript/TypeScriptコード）
- [Vega Native]：ターボモジュール用（ネイティブC++コード）

Vega Studioにより、launch.jsonファイルがデフォルトの構成で作成されます。

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

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

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

launch.jsonへの構成の追加

既存のlaunch.jsonファイルに構成を追加するには、次の手順に従います。

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

ブレークポイントの設定

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

launch.jsonの属性

属性	説明
type	デバッガータイプ：“kepler”（React Native）または”keplerNative”（ターボモジュール）
request	リクエストタイプ：“launch”（新しいセッションを開始する）または”attach”（実行中のアプリに接続する）
name	デバッグドロップダウンに表示される名前
keplerMode	デバッグモード：“debug”または”release”
cwd	ワークスペースのディレクトリ
deviceId	ターゲットデバイスの識別子
forceRebuild	起動前に自動再構築する（デフォルト：false）
disableAppTimeout	デバッグ中にアプリが応答しない場合（ANR）のタイムアウト動作を制御します。`true`（デフォルト）の場合、デバッグセッション中に終了しないようにするため、アプリのタイムアウトを無効にします。`false`の場合、通常のタイムアウト動作が有効になり、一時停止中のアプリが強制終了されることがあります。詳細については、トラブルシューティングのセクションを参照してください。
enableDebug	起動時にデバッガーをアタッチする（デフォルト：true）

構成サンプル

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"]
        }
    ]
}

構成スニペット

名前	説明	使用するタイミング
(script) Launch	選択したデバイスでVega向けReact Nativeをデバッグする	JavaScript/TypeScriptコードの新しいデバッグセッションを開始する
(script) Launch - Perf	パフォーマンスモニタリング機能付きのリリースモードで起動する	パフォーマンス分析（Vega仮想デバイスでは使用できません）
(script) Attach	React Nativeのデバッグのために実行中のVegaアプリにアタッチする	実行中のアプリに対して、JavaScript/TypeScriptコードをデバッグする
(native) Launch	選択したデバイスでターボモジュールのネイティブコードをデバッグする	ネイティブC++コードをデバッグするための新しいセッションの開始する
(native) Attach	実行中のアプリに接続してネイティブコードのデバッグを行う	実行中のアプリに対して、ネイティブC++コードをデバッグする

アプリのデバッグ

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

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

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

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

デバッグツールバーとアクティブなコンソールが表示されたVS Codeのデバッグモードのスクリーンショット。

Fire TV Stickでのデバッグ

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

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

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

デバッグツールバーには、デバッグセッション中に実行できるアクションが表示されます。 VS Codeでコードをステップ実行するためのデバッグツールバーコントロールのスクリーンショット。

アクション	説明
続行/一時停止	次のブレークポイントまで実行を再開するか、現在の実行を一時停止します
ステップオーバー	細部に入らずに次のメソッドを実行する
ステップイン	1行ずつデバッグするため次のメソッド内に入る
ステップアウト	現在のメソッドを完了して呼び出し元に戻る
再起動	現在の構成でデバッグセッションを再起動する
停止	デバッグセッションを終了する

トラブルシューティング

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

Vegaアプリの開発

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

前提条件

Vega Studioデバッガーの構成

自動構成

手動構成

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

launch.jsonへの構成の追加

ブレークポイントの設定

launch.jsonの属性

構成サンプル

構成スニペット

アプリのデバッグ

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

Fire TV Stickでのデバッグ

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

トラブルシューティング

関連トピック

​前提条件

​Vega Studioデバッガーの構成

​自動構成

​手動構成

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

​launch.jsonへの構成の追加

​ブレークポイントの設定

​launch.jsonの属性

​構成サンプル

​構成スニペット

​アプリのデバッグ

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

​Fire TV Stickでのデバッグ

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

​トラブルシューティング

​関連トピック

前提条件

Vega Studioデバッガーの構成

自動構成

手動構成

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

launch.jsonへの構成の追加

ブレークポイントの設定

launch.jsonの属性

構成サンプル

構成スニペット

アプリのデバッグ

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

Fire TV Stickでのデバッグ

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

トラブルシューティング

関連トピック