You are using systematic tracing and isolation techniques to narrow down where a bug originates. The goal is to find the exact location in code where behavior diverges from expectation.
| Scenario | Technique |
|---|---|
| Large codebase / complex flow | Binary search debugging |
| Bug appeared between commits | git bisect |
| Unclear data transformation | Strategic [TRACE] logging |
| Which component is faulty? | Component isolation + mocks |
| Bug hard to reproduce | Minimal reproduction case |
| Conditional or intermittent bug | Conditional breakpoints / watch expressions |
When you have a large codebase or complex flow:
Start: User clicks submit button
End: Error shown to user
Midpoint 1: Form validation
→ Data looks correct here? Continue to later code
→ Data already wrong? Focus on earlier code
Midpoint 2: API request construction
→ Request payload correct? Focus on server side
→ Payload already malformed? Focus on form handling
...Continue until exact line is found
When a bug appeared between two commits:
# Start bisect
git bisect start
# Mark current (broken) state as bad
git bisect bad
# Mark last known good state
git bisect good v2.3.0
# Git checks out middle commit, test and mark
git bisect good # or git bisect bad
# Repeat until found
# Git will report: "abc123 is the first bad commit"
# Clean up
git bisect reset
Automated bisect with test script:
git bisect start HEAD v2.3.0
git bisect run npm test -- --grep "failing test"
Add temporary logging at key points:
function processOrder(order) {
console.log('[TRACE] processOrder input:', JSON.stringify(order));
const validated = validateOrder(order);
console.log('[TRACE] after validation:', JSON.stringify(validated));
const priced = calculatePrice(validated);
console.log('[TRACE] after pricing:', JSON.stringify(priced));
const result = submitOrder(priced);
console.log('[TRACE] final result:', JSON.stringify(result));
return result;
}
Log template: [TRACE] <location>: <what> = <value>
Track how data transforms through the system:
Input: { userId: "123", items: [...] }
↓
validateUser() → { userId: "123", verified: true }
↓
enrichItems() → { userId: "123", verified: true, items: [...enriched] }
↓
calculateTotals() → { ..., subtotal: 100, tax: 8, total: 108 }
↓
Output: { orderId: "456", total: 108 }
At each step, verify:
Track which code paths execute:
function handleRequest(req) {
console.log('[TRACE] handleRequest entered');
if (req.authenticated) {
console.log('[TRACE] authenticated path');
if (req.isAdmin) {
console.log('[TRACE] admin path');
return handleAdminRequest(req);
} else {
console.log('[TRACE] user path');
return handleUserRequest(req);
}
} else {
console.log('[TRACE] unauthenticated path');
return handlePublicRequest(req);
}
}
Test components in isolation to determine which is faulty:
Full System: Frontend → API → Database
↓
Test 1: Frontend → Mock API
→ Works? Problem is in API or Database
Test 2: Real API → Mock Database
→ Works? Problem is in Database
Test 3: API with minimal data
→ Works? Problem is data-dependent
Strip away everything non-essential:
Goal: Smallest possible code that still shows the bug
Eliminate environmental factors:
function complexFunction(input) {
// BREAKPOINT 1: Entry - check input
const step1 = transform(input);
// BREAKPOINT 2: After first transformation
for (const item of step1.items) {
// BREAKPOINT 3: Inside loop - conditional on item
process(item);
}
// BREAKPOINT 4: Exit - check output
return finalize(step1);
}
Only break when condition is met:
item.id === "problematic-id"count > 100response.status !== 200Monitor values without stopping:
this.state.items.lengthperformance.now() - startTimeObject.keys(cache).lengthBefore declaring a component faulty:
-- Create isolated test data
BEGIN TRANSACTION;
-- Insert test data
-- Run test queries
-- Verify results
ROLLBACK;
// Intercept and log all network requests
const originalFetch = window.fetch;
window.fetch = async (...args) => {
console.log('[TRACE] fetch:', args[0]);
const response = await originalFetch(...args);
console.log('[TRACE] response:', response.status);
return response;
};
// Control time for debugging
const realNow = Date.now;
Date.now = () => {
const time = realNow();
console.log('[TRACE] Date.now():', new Date(time).toISOString());
return time;
};
Stop isolating when you have:
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.
Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.
CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).