Loading
A systematic approach to finding and fixing bugs — from console.log to breakpoints to rubber duck debugging.
Debugging is not guessing. It's a scientific process:
The biggest mistake beginners make: changing multiple things at once. If you change three things and the bug disappears, you don't know which change fixed it — and the other two might introduce new bugs.
Debugging is a skill, not luck. Approach it systematically.
console.log() is just the beginning:
Pro tip: Use template literals for quick context:
Go beyond console.log — use the right method for the job.
Breakpoints let you pause code execution and inspect every variable:
Setting breakpoints in Chrome DevTools:
Breakpoint controls:
| Button | Action | | ----------- | ----------------------------------------- | | ▶ Resume | Continue to next breakpoint | | ⤵ Step Over | Execute current line, move to next | | ⤓ Step Into | Jump into the function being called | | ⤴ Step Out | Finish current function, return to caller |
Conditional breakpoints: Right-click a line number → "Add conditional breakpoint" → enter a condition like userId === "abc123". The code only pauses when the condition is true.
Set a breakpoint in your code and step through it line by line.
VS Code has a built-in debugger that's often easier than browser DevTools:
For Node.js:
For Next.js / React:
Create .vscode/launch.json:
Watch expressions: In the Debug sidebar, add expressions to monitor (e.g., users.length, isLoading, error?.message). They update live as you step through code.
The VS Code debugger is more powerful than console.log for complex bugs.
Many bugs come from API calls. Use the Network tab in DevTools:
What to check:
Open the Network tab and inspect an API call from any website.
When you're truly stuck, explain the problem out loud — to a rubber duck, a pet, or an imaginary colleague.
Why it works:
The process:
.sort() returns the array but I'm not returning it from the function."This is not a joke technique. Senior engineers do this regularly.
Try explaining your next bug out loud before reaching for the debugger.
When you encounter a bug, run through this checklist:
git diff to see what you changed since it last workedSave this checklist. Use it every time you hit a bug.
What's next? Learn How to Deploy Your First Project to get your code live on the internet.
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug",
"type": "node",
"request": "launch",
"runtimeExecutable": "npm",
"runtimeArgs": ["run", "dev"],
"port": 9230
}
]
}// Basic logging
console.log("value:", value);
// Structured objects (expandable in DevTools)
console.table(users);
// Grouping related logs
console.group("API Request");
console.log("URL:", url);
console.log("Method:", method);
console.log("Body:", body);
console.groupEnd();
// Timing operations
console.time("fetch-users");
const users = await fetchUsers();
console.timeEnd("fetch-users"); // → fetch-users: 142ms
// Conditional logging
console.assert(users.length > 0, "Users array is empty!");
// Warning and error (styled differently in console)
console.warn("Deprecated: use fetchUsersV2 instead");
console.error("Failed to load user:", error);console.log(`[UserList] users count: ${users.length}, loading: ${isLoading}`);// Add error handling to see failed requests
try {
const response = await fetch("/api/users");
if (!response.ok) {
console.error(`API error: ${response.status} ${response.statusText}`);
const body = await response.text();
console.error("Response body:", body);
}
const data = await response.json();
} catch (error) {
console.error("Network error:", error);
}