Help us understand the problem. What is going on with this article?

react-devtools

More than 3 years have 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してくれる。

park-jh
プルスタックエンジニアになれるまで頑張ろう。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away