mcpField
D
debugging

debugging

github.com/dralgorhythmDevelopment12994 installsUpdated 14w ago
Repository

About debugging

debugging is a skill that guides developers through reproducing, isolating, tracing, testing, and fixing software issues. It includes workflows for code investigation and frontend debugging with Chrome DevTools.

Key features

  1. 01Reproduce and isolate issues
  2. 02Trace code and data flows with Grep
  3. 03Use hypotheses and tests to investigate
  4. 04Debug frontend errors with Chrome DevTools
  5. 05Verify fixes and add regression tests

Use cases

  1. 01Investigate errors using logs and stack traces
  2. 02Trace a bug through related code
  3. 03Record frontend network and console failures
  4. 04Check a fix and add regression coverage

MCP support

The README names Chrome DevTools as an MCP tool for frontend debugging, including console and network inspection, breakpoints, performance profiling, and screenshots.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dralgorhythm/claude-agentic-framework --skill debugging

After installing, type/debuggingin Claude Code to confirm it loaded.

Details

From the project README

Debugging and Troubleshooting

MCP Tools

Chrome DevTools (frontend debugging):

  • Capture console errors and network failures
  • Set breakpoints and inspect state
  • Profile performance bottlenecks
  • Capture screenshots of error states

Workflows

  • Reproduce: Can you reliably reproduce the issue?
  • Isolate: What is the minimal code that exhibits the bug?
  • Trace: Use Grep to follow the call chain
  • Hypothesize: What could cause this behavior?
  • Test: Verify or disprove your hypothesis
  • Fix: Implement the solution
  • Verify: Confirm the fix and add regression test

Debugging Strategy

1. Gather Information
  • Read error messages and stack traces carefully
  • Check logs for context around the error
  • Identify when the issue started (recent changes?)
  • Use Grep to locate related code around the error
2. Trace the Flow
  • Use Grep to trace data flow through function calls
  • Map the call chain from entry point to error
  • Identify where data transforms unexpectedly
3. Reproduce Consistently
  • Create a minimal test case
  • Document exact steps to reproduce
  • For frontend bugs, use Chrome DevTools to record network/console
4. Common Causes
  • Null/undefined: Check for missing null checks
  • Off-by-one: Verify loop boundaries and array indices
  • Async timing: Check race conditions and await usage
  • State mutation: Look for unexpected side effects
  • Type coercion: Verify type handling (especially in JS/TS)

Tools (Examples by Language)

# Check logs
tail -f /var/log/app.log

# Search for error patterns
grep -r "ERROR" ./logs/

# Debug Node.js
node --inspect-brk app.js

# Python debugging
python -m pdb script.py

Frontend Debugging with Chrome DevTools

  • Open DevTools → Console for errors
  • Network tab for failed requests
  • Sources tab for breakpoints
  • Performance tab for slow operations

Post-Fix Checklist

  • Root cause identified and documented
  • Regression test added
  • Similar code checked (use Grep to locate)
  • Fix reviewed by another developer

Comments

Markdown supported