React Developer ToolsでReactで作ったページをデバッグする

# React Developer Toolsとは
Facebookから公式で提供されているデバッグ用ツールです。
React Developer Toolsを使うと、コンポーネントツリーの構造、各コンポーネントに渡されているPropsの値、現在のStateの値といったことが視覚的に確認できるようになります。

Reactで作ったページの状態をすぐ把握できるため、デバッグが捗ります。

React Developer Toolsは現在、３種類が提供されています。

* [Google Chrome拡張機能版](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
* [Firefox拡張機能版](https://addons.mozilla.org/ja/firefox/addon/react-devtools/)
* [Standalone版](https://github.com/facebook/react-devtools/blob/master/packages/react-devtools/README.md)
 * Safariでデバッグしたい場合やReact Navtieをデバッグしたい場合はこちらを使用

この記事ではGoogle Chrome拡張機能版を元に解説していきます。

# インストール方法
[こちら](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)からインストールをします。

追加するとアドレスバーの横にReact Developer Toolsのアイコンが出現します。
これでインストール完了です。
Reactで作られたページを閲覧していると以下のようにアイコンが光ります。

<img width="96" alt="本番コード時" src="https://qiita-image-store.s3.amazonaws.com/0/116289/d6f80174-6596-c1b0-2841-41eb5304da83.png">

# 使い方
ここからは公式で紹介されている[プロジェクト例](https://reactjs.org/community/examples.html)の中から[react-shopping-cart](https://github.com/jeffersonRibeiro/react-shopping-cart)を例に説明していきます。

## React Developer Toolsの開き方
React Developer Toolsのアイコンが光っている時に、Chrome DevToolsを開くと[React]タブが追加されています。
そこをクリックすることで、React Developer Toolsにアクセスできます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/116289/24f3c6a1-6854-c118-dbb7-9e8c1cacc7eb.png)

## コンポーネントツリーを確認する
React Developer Toolsを開くと、左ペインにコンポーネントツリーが表示されます。
HTMLタグではなく、Reactのコンポーネント名やPropsが表示されているため、ソースコードと照らし合わせ易くなっています。
<img width="1439" alt="スクリーンショット 2018-07-12 0.56.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/116289/c0242975-3260-0c0e-972d-aa6d5a101603.png">

左ペインにある灯台の地図記号みたいなアイコンをクリックしてページ要素をクリックすると、そこに対応するコンポーネントにフォーカスを当てることができます。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/116289/b74f09f6-5eae-fd8b-0e40-acd5d6bef426.png)

また、左ペイン上部にある検索窓に探したいコンポーネント名を入れると、フィルタリングして表示することもできます。
この時、Highlight Searchにチェックを入れているとフィルタリングしたコンポーネントの表示がハイライトされます。

## Props・Stateを確認する
コンポーネントツリーから調べたいコンポーネントをクリックすると、右ペインにそのコンポーネントに渡されているPropsの値と現在のStateの値が表示されます。
また、ダブルクリックをすると値の編集をすることもできます。
![react-devtools3.gif](https://qiita-image-store.s3.amazonaws.com/0/116289/f109adc6-d59e-cf24-3a1c-694b9c53f5e6.gif)

## 更新されたコンポーネントを視覚化する
左ペインからHighlight Updatesにチェックを入れていると、再レンダリングされたコンポーネント（Props・Stateに更新があったコンポーネント）がハイライトされるようになります。
![react-devtools2.gif](https://qiita-image-store.s3.amazonaws.com/0/116289/21363b6a-1093-8aa8-ac34-e559d5648fb3.gif)


## コンポーネント絡みの便利機能
コンポーネントツリーからコンポーネントを右クリックするとメニューが表示されます。
<img width="319" alt="スクリーンショット 2018-07-12 1.49.56.png" src="https://qiita-image-store.s3.amazonaws.com/0/116289/20b261a7-a23c-0873-17ab-a78f8eeafb16.png">

各項目は以下の通りとなっています。

* Show all [コンポーネント名]
 * 同名のコンポーネント名でフィルタリングします。
* Scroll to node
 * そのコンポーネントが画面に映るようページスクロールさせます
* Copy element name
 * コンポーネント名をコピーします 
* Copy element props
 * コンポーネントに渡されているPropsの値をコピーします
* Find the DOM node
 * そのコンポーネントに対応したHTML要素をChrome DevToolsのElementsタブ上で見れる
* Show [コンポーネント名] source
 * そのコンポーネントのソースコードをGoogle Chrome上で開きます

## React Developer Toolsのアイコンについて
Reactで作られたページを閲覧しているとアイコンが光りますが、光り方が何種類かあります

* **開発コード時**
<img width="96" alt="開発コード時" src="https://qiita-image-store.s3.amazonaws.com/0/116289/97a8afaa-6448-c46d-2d7c-0935f796c98a.png">
本番ビルドしてない状態で動かしている場合（webpack-dev-serverなど）赤色のアイコンになります。

* **本番コード時**
<img width="96" alt="本番コード時" src="https://qiita-image-store.s3.amazonaws.com/0/116289/d6f80174-6596-c1b0-2841-41eb5304da83.png">
本番ビルドしたものを動かしている場合は、青色のアイコンになります。

* **古いバージョンのReactを使っている場合**
<img width="100" alt="古いバージョン時" src="https://qiita-image-store.s3.amazonaws.com/0/116289/0a470fb9-cf71-1606-2444-f074e474ab3b.png">
古いバージョンのReactで動かしている場合は、黒色のアイコンになります。
Reactのバグ修正の適用とパフォーマンス向上のために、Reactを更新することをツールからオススメされます。

## テーマ
デバッグと直接関係ないですが、Reactタブに対してテーマを設定することができます。
歯車アイコンから好きなテーマを設定することができます。（デフォルトはChrome DevToolsのテーマに合わされています）
<img width="874" alt="テーマ" src="https://qiita-image-store.s3.amazonaws.com/0/116289/22a6ae26-76df-a3a3-1d7a-8033cbce989a.png">

# 参考
[React Developer Tools（GitHub）](https://github.com/facebook/react-devtools)