Use when troubleshooting bugs, analyzing stack traces, using debugging tools (breakpoints, loggers), or applying systematic debugging methodology across any technology stack.
Use when troubleshooting bugs, analyzing stack traces, using debugging tools (breakpoints, loggers), or applying systematic debugging methodology across any technology stack.
user-invocable
false
Universal Debugging Strategies
Overview
Language-agnostic debugging techniques and strategies applicable across all technology stacks.
Debugging Methodology
The Scientific Method for Debugging
Observe: Gather information about the bug
Hypothesize: Form theories about the cause
Predict: What would confirm/refute each theory?
Test: Run experiments to validate
Conclude: Identify root cause and fix
Systematic Approach
1. Reproduce the bug reliably
2. Isolate the failing code path
3. Trace backwards from the error
4. Identify the root cause
5. Verify the fix
6. Add tests to prevent regression
Error Analysis
Stack Trace Reading
Read stack traces bottom to top:
Error: Cannot read property 'name' of undefined
at formatUser (src/utils/format.ts:42) ← Error thrown here
at processUsers (src/services/user.ts:28) ← Called from here
at UserList.render (src/components/UserList.tsx:15)
at App.render (src/App.tsx:8) ← Entry point
Focus on YOUR code - skip framework/library internals initially.
Error Categories
Category
Examples
Common Causes
Null/Undefined
Cannot read property 'x' of undefined
Missing data, async timing
Type Errors
x is not a function
Wrong type, typo
Logic Errors
Wrong output, no error
Incorrect conditions
Runtime Errors
Out of bounds, division by zero
Invalid input
Async Errors
Unhandled promise rejection
Missing error handler
Network Errors
Timeout, connection refused
API down, wrong URL
Debugging Techniques
Binary Search (Bisection)
When the bug is somewhere in a large codebase:
1. Find a known good state (commit, version)
2. Find current bad state
3. Test the midpoint
4. Narrow to half with bug
5. Repeat until found
Git bisect:
git bisect start
git bisect bad # Current commit is broken
git bisect good v1.0.0 # v1.0.0 was working# Git checks out midpoint, test it
git bisect good/bad # Mark and continue
Wolf Fence Algorithm
Split the code into sections and determine which section contains the bug:
Add logging/breakpoints at section boundaries, narrow down.
Rubber Duck Debugging
Explain the code line by line (to a rubber duck, colleague, or yourself):
Explain what the code SHOULD do
Explain what it ACTUALLY does
The discrepancy reveals the bug
Change One Thing at a Time
When experimenting:
Make ONE change
Test
Observe result
Revert if no improvement
Repeat
Data Flow Tracing
Backwards Tracing
Start at the error, trace backwards:
1. Error occurs at line 42: user.name is undefined
2. Where does `user` come from? Line 38: const user = getUser(id)
3. What does getUser return? Check function...
4. getUser queries database, returns undefined if not found
5. Root cause: No null check after getUser
Forward Tracing
Start at input, trace forward:
1. User enters email: "test@example"
2. Form submits to /api/register
3. API validates email... passes (bug: missing TLD check)
4. Saves to database with invalid email
5. Later processes fail on invalid email
// BUG: Index out of boundsfor (let i = 0; i <= array.length; i++) {
console.log(array[i]); // Fails on last iteration
}
// FIXfor (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
Race Conditions
// BUG: Race conditionasyncfunctiongetData() {
fetchData().then(data => { this.data = data; });
processData(this.data); // May run before fetch completes!
}
// FIX: Await the resultasyncfunctiongetData() {
this.data = awaitfetchData();
processData(this.data);
}
Null Reference
// BUG: Accessing property of undefinedconst name = user.profile.name;
// FIX: Optional chaining or guardconst name = user?.profile?.name;
// orif (user && user.profile) {
const name = user.profile.name;
}
