Amazon Developer

Console

as

Settings
Sign out
Notifications
Alexa
Amazonアプリストア
Ring
AWS
ドキュメント
Support
Contact Us
My Cases

Console

as

開発
設計と開発
公開
リファレンス
サポート
メインコンテンツへスキップ
Vega向けReact Nativeは、Fire TV対応アプリのデバッグ用のChrome DevTools（CDT）をサポートしています。ChromeブラウザにはCDTが搭載されており、開発者はアプリの検査、デバッグ、プロファイリングを行うことができます。CDTの基本については、React Nativeのデバッグに関するドキュメントをご覧ください。 このページでは、Vega仮想デバイスとFire TV Stickの両方に対して、Vega StudioでCDTデバッグを設定する方法について説明します。

​
Vega向けReact Nativeの実行

デバッグを開始するには、次の手順に従います。
  1. Vega Studioでコマンドパレットを開きます。 Mac：Shift+Command ⌘+P Linux：Ctrl+Shift+P
  2. コマンドパレットで「Vega App: Run the current Vega app」と入力します。 このコマンドによって以下が実行されます。
    • Metroパッケージャー（React Native用のJavaScriptバンドラー）の起動
    • デバイスとホストコンピューター間のポートフォワーディングの設定
    • デバイスでアプリを起動

​
CDTの起動

CDTは、Vega StudioとChromeブラウザのいずれかから起動します。Vega Studioは統合されたエクスペリエンスを提供し、Chromeはブラウザへの直接アクセスとブラウザ固有のツールを提供します。最良の結果を得るには、Vega Studio内の認定バージョンを使用してください。以下の手順を完了します。

​
Vega Studioでの操作

  1. Vegaデバイスを開発用コンピューターに接続します。
  2. Visual Studio Code（VS Code）で、[Vega Studio] パネルに移動します。
  3. [Vega] セクションで、プロジェクトを選択します。
  4. Debug セクションで、[Debug] を選択します。
  5. [Devices] セクションで、Fire TV StickデバイスまたはVega仮想デバイスを選択します。
  6. デバッグ用にアプリを実行します。 a. Vega向けReact Nativeアプリの実行の手順に従います。 b. アプリが正常に実行されるのを待ちます。 c.「React Nativeパッケージャー」が接続されていることを確認します。 d. VS Codeの [出力] ウィンドウに移動します。 e. ドロップダウンリストから [React Native] を選択します。 Vega拡張機能に接続されたReact Nativeパッケージャーのスクリーンショット。
  7. CDTを起動します。 a. コマンドパレットを開きます。 Mac：Shift+Command ⌘+P Linux：Ctrl+Shift+P b.「Vega: Launch Dev Tools」と入力し、Macの場合はreturnキー、Linuxの場合はEnterキーを押します。 [App Performance Tools] セクションからCDTを起動できることを示すスクリーンショット。 [Vega Studio] > [App Performance Tools] から [Chrome Dev Tools] を選択することもできます。 CDTセッションのスクリーンショット。[Profiles] の [Memory] タブからプロファイリングタイプを選択できます。
  8. CDTを起動すると、新しいウィンドウに進行状況バーが表示されます。読み込みが完了すると、同じウィンドウでCDTが開きます。 CDTからデバイス上のアプリに接続できない場合、ウィンドウの上部に [Disconnected] と表示されます。 App Performance Toolsを使用したときに接続エラーが発生したことを示すスクリーンショット。 スプラッシュスクリーンの表示、アプリの再起動、またはその他の理由でCDTが切断された場合は、Vega Studioの [Dev Tools] タブを閉じます。次に、CDTの起動の手順に従って再接続します。

​
ブレークポイントまたは行単位のデバッグの設定

ブレークポイントは、デバッガーが実行を一時停止するコード内の指定されたポイントで、これによりプログラムの状態を調べることができます。ブレークポイントの詳細については、Chrome for Developersの記事を参照してください。 行単位のデバッグ中にブレークポイントで一時停止している画面のスクリーンショット。
  1. JavaScriptコードファイル（&platform=kepler&dev=true&minify=false）を開き、コピーしたコード行を検索します。コード行番号をクリックしてブレークポイントを設定します。 ブレークポイントが設定されたコード行を示すスクリーンショット。右側に情報パネルがあり、[Breakpoints] セクションが表示されています。
  2. アプリでコードを実行します。ブレークポイントに達すると、デバッガーは実行を一時停止します。 実行時にデバッガーがブレークポイントで一時停止している画面のスクリーンショット。
  3. 変数を検査するか、通常どおりプログラムの実行を制御します。

​
FlipperとCDTのサポート

React Nativeチームによると（英語のみ）、React Native 0.74以降ではFlipperのサポートが終了する予定です。ただし、CDTのソースマップのサポートはReact Native 0.73で完全に機能し、Vega向けReact NativeでもReact Native 0.73にアップデートされれば利用できるようになります。

​
関連トピック

最終更新日 2026年10月26日