Applies systematic tracing and isolation techniques to pinpoint exactly where a bug originates in code. Use when a bug is hard to locate, code is not working as expected, an error or crash appears with unclear cause, a regression was introduced between recent commits, or you need to narrow down which component, function, or line is faulty. Covers binary search debugging, git bisect for regressions, strategic logging with [TRACE] patterns, data and control flow tracing, component isolation, minimal reproduction cases, conditional breakpoints, and watch expressions across TypeScript, SQL, and bash.
npx skills add https://github.com/rohitg00/skillkit --skill trace-and-isolate
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:
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
Automatically creates user-facing changelogs from git commits by analyzing commit history, categorizing changes, and transforming technical commits into clear, customer-friendly release notes. Turns hours of manual changelog writing into minutes of automated generation.
Use when implementation is complete, all tests pass, and you need to decide how to integrate the work - guides completion of development work by presenting structured options for merge, PR, or cleanup
Guide for creating high-quality MCP (Model Context Protocol) servers that enable LLMs to interact with external services through well-designed tools. Use when building MCP servers to integrate external APIs or services, whether in Python (FastMCP) or Node/TypeScript (MCP SDK).
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Next.js best practices - file conventions, RSC boundaries, data patterns, async APIs, metadata, error handling, route handlers, image/font optimization, bundling
Use when starting feature work that needs isolation from current workspace or before executing implementation plans - creates isolated git worktrees with smart directory selection and safety verification
Take rohitg00/trace-and-isolate from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.