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

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

​

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

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

• コマンドプロンプトを開き、デバイスに応じて以下のコマンドを実行します。 Vega仮想デバイス
  vega virtual-device start
  
   vega 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
  

​

アプリの起動

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

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

​

アプリのデバッグ

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

1. Metroバンドラーのターミナルウィンドウでdを押すと、実行中のアプリで開発者メニューが開きます。
2. デバッグオプションを選択します。
   • [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
  

​

関連リソース

• React Nativeの基本的なデバッグに関するドキュメント（英語のみ）

---