React Native DevTools
React Native DevToolsは、React Nativeのためのモダンなデバッグ体験です。ゼロから専用に構築されており、これまでのデバッグ手法よりも根本的に統合され、正確で、信頼性が高いことを目指しています。
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のドキュメントに目を通すことをお勧めします。
コンソール
コンソールパネルでは、メッセージの表示とフィルタリング、JavaScriptの評価、オブジェクトプロパティの調査などができます。
コンソール機能のリファレンス | Chrome DevTools
便利なヒント
- アプリのログが多い場合は、フィルターボックスを使用するか、表示されるログレベルを変更してください。
- Live Expressionsを使って、値の経時変化を監視しましょう。
- Preserve Logs（ログを保持）を使って、リロードをまたいでメッセージを保持しましょう。
- Ctrl + Lでコンソールビューをクリアできます。
ソースとブレークポイント
ソースパネルでは、アプリ内のソースファイルを表示し、ブレークポイントを登録することができます。ブレークポイントを使用して、アプリが一時停止すべきコードの行を定義し、プログラムのライブ状態を調査したり、コードを段階的に実行したりすることができます。
ブレークポイントでコードを一時停止する | Chrome DevTools
ミニガイド
ブレークポイントは、デバッグツールキットにおける基本的なツールです！
- サイドバーまたはCmd ⌘+P / Ctrl+Pを使ってソースファイルに移動します。
- コードの行の横にある行番号カラムをクリックしてブレークポイントを追加します。
- 一時停止中は、右上のナビゲーションコントロールを使ってコードをステップ実行します。
便利なヒント
- アプリが一時停止すると、「Paused in Debugger」というオーバーレイが表示されます。これをタップして再開します。
- ブレークポイント中は、右側のパネルに注意してください。現在のスコープやコールスタックを調査したり、ウォッチ式を設定したりできます。
- テキストエディタから素早くブレークポイントを設定するには、
debugger;文を使用します。これはFast Refreshを介して即座にデバイスに反映されます。 - ブレークポイントには複数の種類があります！例えば、条件付きブレークポイントやログポイントなどです。
メモリ
メモリパネルでは、ヒープスナップショットを取得し、JavaScriptコードのメモリ使用量を時系列で表示することができます。
ヒープスナップショットを記録する | Chrome DevTools
便利なヒント
- Cmd ⌘+F / Ctrl+Fを使用して、ヒープ内の特定のオブジェクトをフィルタリングします。
- 割り当てタイムラインレポートを取得すると、メモリ使用量をグラフで時系列に確認でき、メモリリークの可能性を特定するのに役立ちます。
React DevToolsの機能
統合されたコンポーネントパネルとプロファイラパネルには、React DevToolsブラウザ拡張機能のすべての機能が含まれています。これらはReact Native DevToolsでシームレスに動作します。
Reactコンポーネント
Reactコンポーネントパネルでは、レンダリングされたReactコンポーネントツリーを調査し、更新することができます。
- DevToolsで要素をホバーまたは選択すると、デバイス上でその要素がハイライトされます。
- DevToolsで要素を見つけるには、左上の「要素を選択」ボタンをクリックし、アプリ内の任意の要素をタップします。
便利なヒント
- コンポーネントのPropsとstateは、右側のパネルを使用して実行時に表示および変更できます。
- React Compilerで最適化されたコンポーネントには、「Memo ✨」バッジが付与されます。
プロのヒント：再レンダリングをハイライトする
再レンダリングは、Reactアプリのパフォーマンス問題の大きな原因となることがあります。DevToolsは、コンポーネントの再レンダリングが発生した際にそれをハイライト表示できます。
- 有効にするには、表示設定（
⚙︎）アイコンをクリックし、「Highlight updates when components render（コンポーネントのレンダリング時に更新をハイライトする）」にチェックを入れます。
Reactプロファイラ
Reactプロファイラパネルでは、パフォーマンスプロファイルを記録して、コンポーネントのレンダリングやReactのコミットのタイミングを理解することができます。
詳細については、2018年のオリジナルガイドを参照してください（一部の内容は古い可能性があります）。
DevToolsの再接続
時々、DevToolsがターゲットデバイスから切断されることがあります。これは次のような場合に発生します：
- アプリが閉じられた。
- アプリがリビルドされた（新しいネイティブビルドがインストールされた）。
- ネイティブ側でアプリがクラッシュした。
- 開発サーバー（Metro）が終了した。
- 物理デバイスが切断された。
切断されると、「Debugging connection was closed（デバッグ接続が閉じられました）」というメッセージのダイアログが表示されます。
ここから、以下のいずれかを選択できます：
- 閉じる: 閉じる（
×）アイコンを選択するか、ダイアログの外側をクリックして、切断前の最後の状態でDevToolsのUIに戻ります。 - 再接続: 切断の原因を解決した後、「Reconnect DevTools」を選択します。