name: runtime-debugging description: This skill should be used when the user asks to "debug a runtime issue", "trace an async bug", "inspect state changes", "track a race condition", or otherwise needs runtime instrumentation because logs or stack traces are not enough. version: 2.0.0 allowed-tools: Bash, Read, Write, Edit, Grep
Runtime Debugging Skill
Capture runtime data from instrumented fetch calls. Use when you need to understand what's happening at runtime - variable values, execution flow, timing, or state changes.
When to Use
- Debugging async/await issues or race conditions
- Tracing state changes across function calls
- Capturing variable values at specific execution points
- Understanding control flow through complex code paths
Workflow
Step 1: Create Debug Server
Run the bundled server script:
Start it:
node "${CLAUDE_PLUGIN_ROOT}/scripts/debug-server.js" 3333 &
Verify:
curl http://localhost:3333/health
Step 2: Instrument Code
Insert fetch calls at strategic locations:
fetch("http://localhost:3333/debug", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ label: "your-label", data: { key: value } }) }).catch(() => {});
Placement examples:
Function entry/exit:
async function processOrder(orderId) {
fetch("http://localhost:3333/debug", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ label: "processOrder-entry", data: { orderId } }) }).catch(() => {});
// ...
fetch("http://localhost:3333/debug", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ label: "processOrder-exit", data: { result } }) }).catch(() => {});
return result;
}
Error handling:
catch (error) {
fetch("http://localhost:3333/debug", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ label: "error", data: { message: error.message, stack: error.stack } }) }).catch(() => {});
throw error;
}
Step 3: Ask User to Reproduce
Tell the user:
"I've added debug instrumentation. Please reproduce the issue now, then let me know when done."
Step 4: Analyze Logs
cat .claude-debug/debug.log
Look for:
- Timestamps showing execution order
- Unexpected values
- Missing entries (code paths not taken)
- State inconsistencies
Step 5: Cleanup
pkill -f "debug-server.js"
rm -rf .claude-debug/
Remove the fetch instrumentation from the code.
Label Conventions
| Pattern | Example | Use For |
|---|---|---|
fn-entry |
processOrder-entry |
Function start |
fn-exit |
processOrder-exit |
Function end |
error |
error-auth |
Caught errors |
state |
state-before |
State changes |
branch |
branch-early-return |
Control flow |