Chrome DevToolsを使用したアプリのプロファイリング

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

Vega向けReact Nativeは、Fire TV対応アプリのデバッグ用のChrome DevTools（CDT）をサポートしています。ChromeブラウザにはCDTが搭載されており、開発者はアプリの検査、デバッグ、プロファイリングを行うことができます。CDTの基本については、React Nativeのデバッグに関するドキュメントをご覧ください。

このページでは、Vega仮想デバイスとFire TV Stickの両方に対して、Vega StudioでCDTデバッグを設定する方法について説明します。

Vega向けReact Nativeの実行

デバッグを開始するには、次の手順に従います。

Vega Studioでコマンドパレットを開きます。

Mac： Shift + Command ⌘ + P

Linux： Ctrl + Shift + P
コマンドパレットに「Kepler App: Run the current Vega app」と入力します。

このコマンドによって以下が実行されます。
- Metroパッケージャー（React Native用のJavaScriptバンドラー）の起動
- デバイスとホストコンピューター間のポートフォワーディングの設定
- デバイスでアプリを起動

CDTの起動

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

CDTをVega向けReact Nativeアプリに接続して使用する手順を示すアニメーションデモ — デバッグ手順のアニメーションデモ

アニメーションデモで手順を確認できます。または、以下の手順を実行します。

Vega Studioでの操作

Vegaデバイスを開発用コンピューターに接続します。
Visual Studio Code（VS Code）で、[Kepler Studio] パネルに移動します。
[Vega] セクションで、プロジェクトを選択します。
[Build Modes] セクションで、[Debug] を選択します。

注： React Native用CDTはDebugビルドでのみサポートされています。
[Devices] セクションで、Fire TV StickデバイスまたはVega仮想デバイスを選択します。
デバッグ用にアプリを実行します。

a. Vega向けReact Nativeアプリの実行の手順に従います。

b. アプリが正常に実行されるのを待ちます。

c. 「React Nativeパッケージャー」が接続されていることを確認します。

d. VS Codeの [出力] ウィンドウに移動します。

e. ドロップダウンリストから [React Native] を選択します。

Vega ExtensionにReact Nativeパッケージャーが接続されました。
CDTを起動します。

コマンドパレットからのCDTの起動

a. コマンドパレットを開きます。
- Mac：shift + command ⌘ + p
- Linux： Ctrl + Shift + P
b. 「Kepler: Launch Dev Tools」と入力し、Macの場合はreturnキー、Linuxの場合はEnterキーを押します。

[App Performance Tools] からのCDTの起動

[Kepler Studio] > [アプリパフォーマンスツール] から [Chrome Dev Tools] を選択することもできます。

CDTセッション
CDTを起動すると、新しいウィンドウに進行状況バーが表示されます。読み込みが完了すると、同じウィンドウでCDTが開きます。

接続エラー

CDTからデバイス上のアプリに接続できない場合、ウィンドウの上部に [Disconnected] と表示されます。

スプラッシュスクリーンの表示、アプリの再起動、またはその他の理由でCDTが切断された場合は、Vega Studioの [Dev Tools] タブを閉じます。次に、CDTの起動の手順に従って再接続します。

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

ブレークポイントは、デバッガーが実行を一時停止するコード内の指定されたポイントで、これによりプログラムの状態を調べることができます。

コード内の指定された位置にあるブレークポイントを示すスクリーンショット。 — 行単位のデバッグ

JavaScriptコードファイル（&platform=kepler&dev=true&minify=false）を開き、コピーしたコード行を検索します。コード行番号をクリックしてブレークポイントを設定します。

ブレークポイントの設定
アプリでコードを実行します。ブレークポイントに達すると、デバッガーは実行を一時停止します。

ブレークポイントを使用したデバッグ
変数を検査するか、通常どおりプログラムの実行を制御します。

FlipperとCDTのサポート

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

Last updated: 2025年9月30日