メインコンテンツにスキップ

デバッグの基本

開発者メニューを開く​

React Nativeは、いくつかのデバッグオプションを提供するアプリ内開発者メニューを提供します。デバイスを振るか、キーボードショートカットを使用して開発者メニューにアクセスできます。

  • iOSシミュレーター: Cmd ⌘ + D (または デバイス > シェイク)
  • Androidエミュレーター: Cmd ⌘ + M (macOS) または Ctrl + M (WindowsとLinux)

または、Androidデバイスとエミュレーターの場合は、ターミナルでadb shell input keyevent 82を実行できます。

The React Native Dev Menu

注記

開発者メニューは、リリース（本番）ビルドでは無効になっています。

DevToolsを開く​

React Native DevToolsは、React Nativeに組み込まれているデバッガーです。Webブラウザと同様に、JavaScriptコードの実行状況を検査して理解することができます。

DevToolsを開くには、次のいずれかの操作を行います。

  • 開発者メニューで「DevToolsを開く」を選択します。
  • CLI (npx react-native start) からjキーを押します。

最初に起動すると、DevToolsはウェルカムパネルと、ログを表示してJavaScriptランタイムと対話できる開いているコンソールドロワーに開きます。ウィンドウの上部から、統合されたReactコンポーネントインスペクターやプロファイラーなど、他のパネルに移動できます。

React Native DevTools opened to the "Welcome" pane

React Native DevToolsは、React Nativeに組み込まれた専用のデバッグアーキテクチャを搭載し、Chrome DevToolsフロントエンドのカスタマイズビルドを使用しています。これにより、使い慣れたブラウザに合わせたデバッグ機能を提供することができ、これらの機能は緊密に統合され、エンドツーエンドの信頼性のために構築されています。

React Native DevToolsガイドで詳細をご覧ください。

注記

React Native DevToolsは、Hermesエンジンでのみ使用でき、Google ChromeまたはMicrosoft Edgeのインストールが必要です。

情報

Flipperと代替デバッグツール​

React Native DevToolsは、以前のFlipper、実験的デバッガー、Hermesデバッガー（Chrome）のフロントエンドを置き換えます。古いバージョンのReact Nativeを使用している場合は、該当のバージョンのドキュメントを参照してください。

引き続き、Direct JSCデバッグやリモートJSデバッグ（非推奨）などのレガシーデバッグ方法を提供しています（その他のデバッグ方法を参照）。

React Native DevToolsは、Reactアプリの懸念事項をデバッグするために設計されており、ネイティブツールを置き換えるものではありません。React Nativeの基盤となるプラットフォームレイヤーを検査する場合（たとえば、ネイティブモジュールを開発する場合）は、XcodeとAndroid Studioで利用可能なデバッグツールを使用してください（ネイティブコードのデバッグを参照）。

その他の役立つリンク

LogBox​

LogBoxは、アプリによって警告またはエラーがログに記録されたときに表示されるアプリ内ツールです。

A LogBox warning and an expanded LogBox syntax error

注記

LogBoxは、リリース（本番）ビルドでは無効になっています。

致命的なエラー​

JavaScript構文エラーなど、回復不可能なエラーが発生すると、LogBoxがエラーの場所で開きます。この状態では、コードを実行できないため、LogBoxを閉じることができません。構文エラーが修正されると、高速リフレッシュまたは手動リロード後、LogBoxは自動的に閉じます。

コンソールエラーと警告​

コンソールエラーと警告は、赤または黄色のバッジが付いた画面上の通知として表示されます。

  • **エラー**は、通知カウント付きで表示されます。通知をタップすると、展開されたビューが表示され、他のログをページングできます。
  • **警告**は、詳細のない通知バナーを表示し、React Native DevToolsを開くように促します。

React Native DevToolsが開いている場合、致命的なエラーを除くすべてのエラーはLogBoxに隠されます。特定のログを非表示にしたり、レベルを調整したりできるさまざまなLogBoxオプションがあるため、React Native DevTools内のコンソールパネルを信頼できる情報源として使用することをお勧めします。

💡 ログの無視

LogBoxは、LogBox APIを介して構成できます。

import {LogBox} from 'react-native';

すべてのログを無視する​

LogBox通知は、LogBox.ignoreAllLogs()を使用して無効にできます。これは、製品デモを行う場合などに役立ちます。

LogBox.ignoreAllLogs();

特定のログを無視する​

通知は、LogBox.ignoreLogs()を介してログごとに無効にできます。これは、ノイズの多い警告や、サードパーティの依存関係などで修正できない警告に役立ちます。

LogBox.ignoreLogs([
  // Exact message
  'Warning: componentWillReceiveProps has been renamed',

  // Substring or regex match
  /GraphQL error: .*/,
]);
注記

LogBoxは、Reactからの特定のエラーを警告として扱います。つまり、アプリ内エラー通知として表示されません。上級ユーザーは、LogBoxData.setWarningFilter()を使用してLogBoxの警告フィルターをカスタマイズすることで、この動作を変更できます。

パフォーマンスモニター​

AndroidとiOSでは、開発中に開発者メニューで**「パフォーマンスモニター」**を選択することで、アプリ内パフォーマンスオーバーレイを切り替えることができます。この機能の詳細については、こちらをご覧ください。

The Performance Monitor overlay on iOS and Android

情報

パフォーマンスモニタはアプリ内で実行され、ガイドです。正確なパフォーマンス測定には、Android StudioとXcodeのネイティブツーリングを調査することをお勧めします。