🐞 Debugging Is More Than `console.log`

console.log is handy, but sometimes it is not enough. Tough bugs need more context: state, call stacks, network payloads. The better we know the tooling, the faster we fix issues — and the less we panic.

1. Built-in browser debugger

Drop breakpoints in Sources and inspect variables at runtime.
Use step over, step into, step out to walk through code line by line.
Add watch expressions to track specific values.
Enable “pause on exceptions” to catch errors right when they fire.

2. React DevTools

Inspect the component tree and props in real time.
Check hook state, context values, and effects.
Use the profiler to see which component renders too often.

3. Redux DevTools (plus MobX, Zustand inspectors)

Browse action history with before/after state snapshots.
Time-travel backward to find when state went off track.
Export sessions to share with teammates or keep for tests.

4. Network tools

The Network tab shows requests, responses, headers, status codes.
Throttle the connection to simulate slow networks.
Peek at the initiator to learn what triggered the call.

5. Server logs and Sentry

Reproduce bugs while watching server logs, Sentry events, timestamps.
Filter by user ID or release to locate the failing request.

6. Layout and accessibility helpers

Layout and Flexbox inspectors explain why elements “float”.
The Accessibility tab highlights missing roles, labels, focus traps.

7. Mobile debuggers

Android Studio / Chrome DevTools for WebView debugging.
Safari Web Inspector for iOS.
Expo tools, React Native Flipper for React Native apps.

8. Tests as debugging

Write small unit tests reproducing the scenario.
Snapshot outputs to see what is changing.
Use debug() in Testing Library to print the current DOM.

Build the habit

Practice on an easy bug and walk through each tool once.
Keep a cheat sheet with DevTools shortcuts at hand.
Share your screen with teammates and show your process.
Run profilers and inspectors at least once a sprint, even when things “just work”.

Takeaway

console.log is great for quick checks, but true debugging power comes from full toolsets that show the bigger picture. Master them now, and the next bug will fall faster — with a lot less stress. 💪

🐞 Debugging Is More Than console.log