How to debug React with breakpoints
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Debugging React with breakpoints allows you to pause code execution, inspect variables, and step through component logic line by line. As the creator of CoreUI with 12 years of React development experience, I use breakpoints daily to diagnose complex state issues in production applications.
The most effective approach combines Chrome DevTools breakpoints with strategic debugger statements in your code.
Direct Answer
Add debugger statement in your component:
function UserProfile({ userId }) {
const [user, setUser] = useState(null)
useEffect(() => {
debugger // Execution pauses here
fetch(\`/api/users/\${userId}\`)
.then(res => res.json())
.then(data => setUser(data))
}, [userId])
return <div>{user?.name}</div>
}
Chrome DevTools Breakpoints
Open DevTools → Sources → find your component file:
- Click line number to set breakpoint
- Interact with your app to trigger the code
- Execution pauses at breakpoint
- Inspect variables in Scope panel
Conditional Breakpoints
Right-click line number → Add conditional breakpoint:
function ProductList({ products }) {
return (
<ul>
{products.map(product => {
// Conditional breakpoint: product.price > 1000
return <li key={product.id}>{product.name}</li>
})}
</ul>
)
}
Step Through Code
When paused at breakpoint:
- F9: Continue to next breakpoint
- F10: Step over (next line)
- F11: Step into (enter function)
- Shift+F11: Step out (exit function)
Debug Hooks
function DataFetcher() {
const [data, setData] = useState(null)
useEffect(() => {
debugger // Pause to inspect effect timing
const fetchData = async () => {
debugger // Pause inside async function
const response = await fetch('/api/data')
const result = await response.json()
debugger // Pause before setState
setData(result)
}
fetchData()
}, [])
return <div>{data?.name}</div>
}
Watch Expressions
Add expressions to watch while debugging:
- Open DevTools → Watch panel
- Click + to add expression
- Enter: `props.userId`, `state.count`, etc.
- Values update as you step through code
Best Practice Note
This is the same debugging workflow we use when developing CoreUI components. Breakpoints provide precise control over execution, allowing you to inspect state at exact moments. Combine with React DevTools for complete debugging coverage.
Related Articles
For complementary debugging, check out how to debug React with console.log and how to use React DevTools.
