React DevToolsを使用してReact Appをデバッグする

環境

  • windows10
  • DockerDesktop for Win 3.5.x
  • React Developer Tools 4.21.0
  • node v14.17.4
  • npm 6.14.14
  • React 17.0.1
  • VsCode
  • gitbash 2.32.0.1

前提知識

React Developer Tools
Adds React debugging tools to the Chrome Developer Tools. Created from revision 2f8f60ca8 on 10/31/2021.
  • Reactで描画されたページかつ、開発モードでビルドされている場合(Development Build)にブラウザ上でデバッグすることができるChorme拡張機能
  • 下図の赤線の画像のように、赤い背景色でReactのアイコンが表示されていれば、デバッグ可能

基本的な使い方

コンポーネントの詳細を確認する

  • ChormeのデベロッパーツールにComponentsタブが追加されているので、こちらから操作する
  • 現在ブラウザで表示しているページのコンポーネント構成を確認できる
  • また、個々のコンポーネントののpropsやstateなどが確認できる

デバッグする

  1. デバッグしたいコンポーネントを画面左から選択
  2. 画面左から<>マークを選択し、該当のコンポーネントのソースマップ箇所に移動する
  3. ブレークポイントを設定する(ブレークポイントを設定した行番号は緑色になる)
  4. ブラウザでブレークポイントを設定した箇所がレンダリングされるページを参照する
  5. 範囲 ➤ からスコープごとに出力内容が確認できる

以上です。これでcosole.logの記述から脱却できますね

タイトルとURLをコピーしました