All 5 React DevTools & Debugging questions
More in React DevTools & Debugging
What is a helpful first step when debugging an error message shown in the browser console? How do you use the Components tab in React DevTools to inspect a component's current state? How do you debug a component that is not updating even though its state changed? How would you use React DevTools to find out why a component re rendered when you did not expect it to?
Advertisement
Back to results for “Debugging”
React › React DevTools & Debugging

What is React DevTools and how do you install it?

Beginner

Answer

React DevTools is a free browser extension available for Chrome and Firefox that adds two new tabs to your browser's developer tools, letting you inspect the component tree, view current props and state, and see exactly why a component re rendered.
// Install from the Chrome Web Store or Firefox Add-ons page
// Search for React Developer Tools
// Once installed, open browser DevTools and look for the new Components and Profiler tabs
Real-world example A developer debugging why a button shows the wrong text opens the Components tab in React DevTools, clicks on the button component, and immediately sees the exact prop values it currently received.

Common follow-ups: Does React DevTools work on a production build, or only in development?;What is the difference between the Components tab and the Profiler tab?

Debugging & Diagnostics;Performance (memo/useMemo)
All 5 React DevTools & Debugging questions