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

アプリ内の開発者メニューにより、要素インスペクターやパフォーマンスモニターなどのデバッグツールへのアクセスが提供されます。開発者メニューを使用すると、デバイスまたは仮想デバイスでのアプリの実行中に、UI要素の検査、フレームレートのモニタリング、アプリの再読み込みを行ったり、デバッガーを開いたりできます。

​

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

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

• コマンドプロンプトを開き、次のコマンドを実行します。 Vega仮想デバイス：
  vega virtual-device start
  
  Vega仮想デバイスのウィンドウが開き、ホーム画面が表示されます。
   vega device start-port-forwarding --device <デバイス名> -p <ポート> --forward false
  
  ターミナルに、指定したポートでポートフォワーディングが開始されたことを示す確認メッセージが表示されます。 Fire TV Stick：
  vega device start-port-forwarding --port 8081
  
  ターミナルに、ポート8081でポートフォワーディングが開始されたことを示す確認メッセージが表示されます。

​

Metroバンドラーの起動

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

• コマンドプロンプトを開き、次のコマンドを実行します。
  npm start
  
  Metroバンドラーで依存関係が読み込まれ、起動ロゴが表示されます。

​

アプリの起動

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

• Vega仮想デバイスまたはFire TV Stickで、アプリを起動する手順に従います。アプリが起動すると、デバイスまたは仮想デバイスにアプリのホーム画面が表示されます。

​

アプリのデバッグ

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

1. Metroバンドラーのターミナルウィンドウでdを押すと、実行中のアプリで開発者メニューが開きます。デバイス画面にモーダルオーバーレイが表示され、使用できるデバッグオプションの一覧が表示されます。
2. デバッグオプションを選択します。
   • [Reload] - アプリを再読み込みします。
   • [Open Debugger] - React Native DevTools（React Native 0.83）またはFlipperデバッガー（React Native 0.72）を開きます。Chromeのリモートデバッガーを使用してデバッガーにアクセスすることもできます。
   • [Show Element Inspector] - React Nativeの要素インスペクター（英語のみ）を表示します。
   • [Disable Fast Refresh] - コードの変更後にアプリをホットリロードする機能を無効にします。
   • [Configure Bundler] - JavaScriptバンドルが配置されているアドレスを構成します。
   • [Show Perf Monitor] - パフォーマンスモニター（英語のみ）を開きます。

オプションを選択すると、開発者メニューが閉じ、選択したツールがデバイス上でアクティブになります。

​

関連トピック

• デバッグに関する問題の修正
• Vega Studioを使用して1行ずつデバッグを実行する方法
• ファイル、クラッシュレポート、ログの管理
• React Nativeの基本的なデバッグに関するドキュメント（英語のみ）

---