開発者メニューのツールを使用してアプリをデバッグする方法

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

アプリ内の開発者メニューを使用すると、要素インスペクターやパフォーマンスモニターなどのデバッグツールにアクセスできます。

ポートフォワーディングの設定

アプリの開発者メニューのデバッグツールにアクセスするには、まず、アプリをMetroバンドラーに接続する必要があります。アプリをMetroバンドラーに接続するには、ポートフォワーディングを設定する必要があります。

ポートフォワーディングを設定するには

コマンドプロンプトを開き、デバイスに応じて以下のコマンドを実行します。

Vega仮想デバイス

クリップボードにコピーしました。
```
  kepler virtual-device start
```
```
  kepler device start-port-forwarding --device <デバイス名> -p <ポート> --forward false
```
Fire TV Stick：

クリップボードにコピーしました。
```
 vda reverse tcp:8081 tcp:8081 && vda reverse tcp:8097 tcp:8097
```

Metroバンドラーの起動

Vega仮想デバイスまたはFire TV Stickを使用してアプリを起動する前に、Metroバンドラーを起動します。

Metroバンドラーを起動するには

コマンドプロンプトを開き、次のコマンドを実行します。

クリップボードにコピーしました。
```
 npm start
```

注： npm startコマンドは、node node_modules/react-native/local-cli/cli.js startコマンドのエイリアスです。

アプリの起動

Metroバンドラーを起動したら、アプリを起動できます。

アプリを起動するには

Vega仮想デバイスまたはFire TV Stickで、アプリを起動する手順に従います。

アプリのデバッグ

Vega仮想デバイスまたはFire TV Stickでアプリが実行されたら、アプリをデバッグできます。

アプリをデバッグするには

Metroバンドラーのターミナルウィンドウでdを押すと、実行中のアプリで開発者メニューが開きます。
デバッグオプションを選択します。

[Reload] - アプリを再読み込みします。
[Open Debugger] - Flipperデバッガー（React Native 0.72）またはChrome DevTools（React Native 0.73以降）を開きます。Chromeのリモートデバッガーを使用してデバッガーにアクセスすることもできます。
[Show Element Inspector] - React Nativeの要素インスペクター（英語のみ）を表示します。
[Disable Fast Refresh] - コードの変更後にアプリをホットリロードする機能を無効にします。
[Configure Bundler] - JavaScriptバンドルが配置されているアドレスを構成します。
[Show Perf Monitor] - パフォーマンスモニター（英語のみ）を開きます。

アプリのデバッグのトラブルシューティング

Metroバンドラーをアプリに接続できない場合は、ポートフォワーディングが設定されていることを確認してください。設定するには、Fire TV Stickの場合はvda reverseコマンドを使用し、Vega仮想デバイスの場合はssh sim -Rコマンドを使用します。
クラウド環境を使用する場合は、次のSSH構成オプションが使用されていることを確認してください。
```
  LocalForward 8081 127.0.0.1:8081
  LocalForward 8097 127.0.0.1:8097
```