Reactアプリのデバッグ方法 - Qiita

自分が作成したReactアプリをnpm startで起動してWebページを開いた場合、一番右の赤色アイコンが表示される。 画面のコンポーネント構成を見る方法 「Chromeのメニュー」→「その他ツール」→「デベロッパーツール」を開く。 デベロッパーツールのタブメニューから「Components」を選択。 現在ブラウザで表示しているページのコンポーネント構成を確認できる。 また、対象のコンポーネントをクリックすればpropsやstateの値を確認することも可能。 多重階層になっていてお目当てのコンポーネントを探すのが大変なときは、Componentsタブ内の左上にある矢印ボタンを押して画面から対象コンポーネントを選択することも可能。 （ネストされたコンポーネントを正確にポインティングするのは難しいようなので、補助的に使ってあげてください） ブレイクポイントを設定してステップ実行でデバッグする