v19.2Latest
React Developer Tools
React Developer Toolsを使用して、Reactのコンポーネントを検査し、propsとstateを編集し、パフォーマンスの問題を特定します。
学習内容
- React Developer Toolsのインストール方法
ブラウザ拡張機能
Reactで構築されたウェブサイトをデバッグする最も簡単な方法は、React Developer Toolsブラウザ拡張機能をインストールすることです。これはいくつかの人気ブラウザで利用できます：
これで、Reactで構築されたウェブサイトを訪問すると、ComponentsパネルとProfilerパネルが表示されます。
Safariおよびその他のブラウザ
その他のブラウザ（例えばSafari）では、react-devtoolsnpmパッケージをインストールしてください：
次に、ターミナルから開発者ツールを開きます：
次に、ウェブサイトの<script>タグをウェブサイトの<head>の先頭に追加して接続します：
ブラウザでウェブサイトを再読み込みして、開発者ツールで表示します。
モバイル（React Native）
React Nativeで構築されたアプリを検査するには、React Developer Toolsを深く統合した組み込みデバッガーであるReact Native DevToolsを使用できます
React Nativeのバージョンが0.76より前の場合は、上記のSafariおよびその他のブラウザガイドに従ってReact DevToolsのスタンドアロンビルドを使用してください。