React Developer Tools

🔍 What is React Developer Tools?

React Developer Tools is a browser extension that allows you to inspect, debug, and analyze your React applications directly from your browser’s Developer Tools panel.

It gives you visibility into:

• The component tree
• Props and state
• Hooks
• Component re-renders
• And more…

---

✅ Why Use React DevTools?

🧠 Task	✅ How DevTools Helps
Debugging UI	See which component is rendering what
View props/state	View & edit them live
Understanding tree	Navigate nested components
Performance debugging	Use Profiler to measure slow components
Hook inspection	See values of useState, useEffect, etc.

---

🛠️ How to Install React DevTools

✅ On Chrome:

• Go to Chrome Web Store
• Click “Add to Chrome”

✅ On Firefox:

• Go to Firefox Add-ons
• Click “Add to Firefox”

---

🔍 How to Use DevTools

1. Open your React app in the browser.
2. Press F12 or Ctrl+Shift+I (or Right Click → Inspect).
3. Go to the new ⚛️ Components tab.
4. Browse through the React component tree.

---

📂 What You Can See

Tab / Section	What It Shows
Component Tree	Hierarchy of all mounted React components
Props	Data passed from parent to child
State	Current values from useState, this.state, etc.
Hooks	Values from useState, useReducer, etc.
Rendered Highlight	Highlights selected component in the live UI
Profiler	(Optional) Analyze performance for slow renders

---

🧪 Example: Inspecting a Component

In DevTools, you'll see:

• Component: Welcome
• Props: { name: "Shubham" }
• Hooks: likes = 0
• ✅ Ability to edit state live!

---

🎛️ Features You Can Use in DevTools

Feature	Description
Edit props/state	Click and change values directly
Search components	Find components by name
Highlight DOM	Visually see which part of UI maps to which component
Track re-renders	Helps debug unnecessary renders
Record performance	Optimize with built-in Profiler

---

🧠 When You Should Use It

• You're debugging UI issues (e.g., data not showing)
• You want to see component state or props
• You're learning a new codebase
• You're optimizing for performance

---

🚫 Limitations

• Only works in development mode by default
• Requires app to be built with React 😄

---

📌 Summary

Feature	What It Does
Components Tab	Explore, inspect, and edit components
Profiler Tab	Measure rendering performance
State/Props Viewer	Debug live data
Hook Inspection	View current hook values (useState, useEffect)

👉 Check the React DevTools Cheat Sheet