Reactコンポーネントの状態を確認するにはReact Developer Toolsを使う

目的

WEB上で動作しているページでReactコンポーネントの中身がどのようになっているかを確認する。
→入力やページ遷移での変化を目視確認する

導入方法

• GoogleChromeの拡張機能「React Developer Tools」を利用する。

  • React Developer Toolsのページはこちら

• 導入後にコンポーネントを確認したいページでF12を押すと、
  以下画像のように「Components」というタグが追加されている。
  ここでそのページに関わるコンポーネントとその内容が全て確認できる。
  デベロッパーツールのように直接編集することも可能。