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

React Native DevTools

React Native DevToolsは、デバッガスタックをエンドツーエンドで書き直した、新しいデバッグエクスペリエンスです。React Nativeの従来のデバッグ方法よりも、より深く統合され、根本的に信頼性の高いものになることを目指しています。

React Native DevTools opened to the "Welcome" pane

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

💡 互換性 — 0.76でリリース

React Native DevToolsは、Hermesを実行しているすべてのReact Nativeアプリをサポートしています。以前のFlipper、Experimental Debugger、およびHermesデバッガ（Chrome）のフロントエンドを置き換えます。

React Nativeの古いバージョンでReact Native DevToolsを設定することはできません。

  • ChromeブラウザのDevTools — サポートされていません
    • chrome://inspect を介したReact Nativeへの接続は、今後サポートされません。最新バージョンのChrome DevTools（最新のブラウザ機能とAPIに合わせて構築されています）はテストされておらず、このフロントエンドにはカスタマイズが不足しているため、機能が正しく動作しない場合があります。代わりに、React Native DevToolsでサポートされているバージョンを提供しています。
  • Visual Studio Code — サポートされていません（既存）
    • Expo ToolsやRadon IDEなどのサードパーティ製拡張機能は互換性が向上している可能性がありますが、Reactチームによって直接サポートされていません。
💡 フィードバックとよくある質問

私たちは、すべてのプラットフォームでReactをデバッグするために使用するツールが、信頼性が高く、使い慣れた、シンプルで、まとまりのあるものになることを望んでいます。このページで説明されているすべての機能は、これらの原則を念頭に置いて構築されており、将来的にはより多くの機能を提供したいと考えています。

React Native DevToolsの将来に向けて積極的に取り組んでおり、問題、よくある質問、フィードバックを追跡するために、GitHubディスカッションを一元化しました。

コア機能​

React Native DevToolsは、Chrome DevToolsフロントエンドに基づいています。Web開発のバックグラウンドがある場合、その機能はおなじみのはずです。出発点として、完全なガイドとビデオリソースを含むChrome DevToolsドキュメントを参照することをお勧めします。

コンソール​

A series of logs React Native DevTools Sources view, alongside a device

コンソールパネルでは、メッセージの表示とフィルタリング、JavaScriptの評価、オブジェクトプロパティの検査などを行うことができます。

コンソール機能リファレンス | Chrome DevTools

役立つヒント​

  • アプリに多くのログがある場合は、フィルターボックスを使用するか、表示されるログレベルを変更します。
  • ライブエクスプレッションを使用して、時間の経過とともに値を監視します。
  • ログの保持を使用して、リロード間でメッセージを保持します。
  • コンソールビューをクリアするには、Ctrl + Lを使用します。

ソースとブレークポイント​

A paused breakpoint in the React Native DevTools Sources view, alongside a device

ソースパネルでは、アプリのソースファイルを表示し、ブレークポイントを登録できます。ブレークポイントを使用して、アプリを一時停止するコード行を定義します。これにより、プログラムのライブ状態を検査し、コードを段階的に実行できます。

ブレークポイントでコードを一時停止する | Chrome DevTools

ヒント

ミニガイド​

ブレークポイントは、デバッグツールキットの基本的なツールです！

  1. サイドバーまたはCmd ⌘+P / Ctrl+Pを使用して、ソースファイルに移動します。
  2. コード行の横にある行番号列をクリックして、ブレークポイントを追加します。
  3. 一時停止したら、右上のナビゲーションコントロールを使用して、コードをステップ実行します。

役立つヒント​

  • アプリが一時停止すると、「デバッガで一時停止」オーバーレイが表示されます。再開するには、それをタップします。
  • ブレークポイントにいるときは、右側のパネルに注目してください。これにより、現在のスコープとコールスタックを検査し、ウォッチ式を設定できます。
  • debugger;ステートメントを使用して、テキストエディタからすばやくブレークポイントを設定します。これは、Fast Refreshを介してデバイスにすぐに到達します。
  • 複数種類のブレークポイントがあります！たとえば、条件付きブレークポイントとログポイント。

DevToolsの再接続​

場合によっては、DevToolsがターゲットデバイスから切断されることがあります。これは、以下の場合に発生する可能性があります。

  • アプリが閉じている。
  • アプリが再構築される（新しいネイティブビルドがインストールされる）。
  • アプリがネイティブ側でクラッシュした。
  • 開発サーバー（Metro）が終了している。
  • 物理デバイスが切断されている。

切断されると、「デバッグ接続が閉じられました」というメッセージのダイアログが表示されます。

A reconnect dialog shown when a device is disconnected

ここから、以下のいずれかを選択できます。

  • 閉じる：閉じる（×）アイコンを選択するか、ダイアログの外側をクリックして、切断前の最後の状態のDevTools UIに戻ります。
  • 再接続：切断の理由に対処した後、「DevToolsの再接続」を選択します。