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 2468a8735 on 5/19/2023.

chrome.google.com

• Reactで描画されたページかつ、開発モードでビルドされている場合(Development Build)にブラウザ上でデバッグすることができるChorme拡張機能
• 下図の赤線の画像のように、赤い背景色でReactのアイコンが表示されていれば、デバッグ可能

  

基本的な使い方

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

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

デバッグする

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

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