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

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

​

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

アプリの開発者メニューのデバッグツールにアクセスするには、まず、アプリを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コマンドを使用します。
• ファイル、クラッシュレポート、ログの管理
• React Nativeの基本的なデバッグに関するドキュメント（英語のみ）

---