Posted at

react-devtools

More than 1 year has passed since last update.


react-devtoolsとは


  • facebookで開発

  • chromeのdeveloper toolsをreactまで拡張した感じ

  • コンポーネントの階層構造、propsやstateの確認ができる。


設置


standalone app

chromeやfirefoxはextensionを提供しているので、説明は割愛する。

次はstandaloneタイプのreact-devtoolsの設置手順だ。

React DOMだけではなくReact Nativeにも対応されているので、こっちも悪くないかも。

react-devtoolsをグローバルで設置する。

% yarn global add react-devtools

react-devtoolsを実行する。

% react-devtools

react-devtoolsが実行されてreactとのコネクションを待っているとメッセージが表示される。

React Nativeの場合は自動でconnectされるが、React DOMの場合はtopページに次を追加しなければならない。

<script src="http://localhost:8097"></script>

スクリーンショット 2017-06-26 11.44.10.png

スクリーンショット 2017-06-26 11.52.14.png

次からはreactアプリケーションが起動されている場合はReact DOMも自動でconnectしてくれる。