開発者メニューのツールを使用してアプリをデバッグする方法
アプリ内の開発者メニューにより、要素インスペクターやパフォーマンスモニターなどのデバッグツールへのアクセスが提供されます。開発者メニューを使用すると、デバイスまたは仮想デバイスでのアプリの実行中に、UI要素の検査、フレームレートのモニタリング、アプリの再読み込みを行ったり、デバッガーを開いたりできます。
ポートフォワーディングの設定
アプリの開発者メニューのデバッグツールにアクセスするには、アプリをMetroバンドラーに接続します。アプリをMetroバンドラーに接続するには、ポートフォワーディングを設定する必要があります。
ポートフォワーディングを設定するには
-
コマンドプロンプトを開き、次のコマンドを実行します。
Vega仮想デバイス：
vega virtual-device startVega仮想デバイスのウィンドウが開き、ホーム画面が表示されます。
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 startMetroバンドラーで依存関係が読み込まれ、起動ロゴが表示されます。
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] - 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の基本的なデバッグに関するドキュメント（英語のみ）
Last updated: 2026年7月30日
