Show GN: MCP Debug Tools - 디버그 AI 보조 도구

(marketplace.visualstudio.com)

4P by hwanyong 1일전 | ★ favorite | 댓글과 토론

AI-VSCode 디버그 브릿지 - AI가 데이터 기반의 버그를 조사합니다.

'MCP Debug Tools'는 Microsoft의 Debug Adapter Protocol(DAP)과 Anthropic의 Model Context Protocol(MCP)을 연결한 오픈소스 프로젝트입니다. 이 도구를 통해 Claude, Cursor, Windsurf 같은 AI 도구들이 VSCode의 강력한 디버깅 기능을 직접 제어할 수 있게 됩니다.

Before (기존 방식)

개발자: "A 메뉴에서 보이는 컴포넌트의 취합 데이터가 B 메뉴에서 보이는 데이터와 달라. 버그를 찾아야 해."  
AI: "코드를 분석 중...코드 구조의 문제를 발견했습니다."  
개발자: "증상은 여전히 똑같아"  
AI: "더 깊이 분석해볼게요. 데이터타입과 구조를 비교 중..."  
개발자: "증상이 해결이 안됐어"  
AI: "더 많은 로그가 필요해요. 로그를 추가하고 다시 시도해볼게요."  
개발자: "증상이 여전히 해결이 안됐어"  
  
[반복...]

After (MCP Debug Tools)

개발자: "A 메뉴에서 보이는 컴포넌트의 취합 데이터가 B 메뉴에서 보이는 데이터와 달라. 디버그를 바탕으로 데이터를 비교해서 문제를 확인해."  
AI: "A 메뉴의 컴포넌트의 위치과 B 메뉴의 컴포넌트의 위치를 비교해볼게요."  
AI: "A 메뉴의 컴포넌트는 X 파일의 Y 함수에서, B 메뉴의 컴포넌트는 Z 파일의 W 함수에서 렌더링되고 있어요."  
AI: "X 파일의 Y 함수에서 데이터를 가져오는 부분을 브레이크포인트로 설정했어요. 디버깅을 시작할게요."  
  
[디버깅 세션 시작, AI가 VSCode의 디버깅 기능을 활용하여 코드 실행, 변수 검사, 스택 트레이스 확인 등]  
  
AI: "브레이크포인트에 도달했어요. 변수들을 검사해보니, A 메뉴의 데이터는 API 호출 결과를 직접 사용하고 있지만, B 메뉴의 데이터는 캐시된 데이터를 사용하고 있어요. 이로 인해 데이터 불일치가 발생하는 것 같아요."  
AI: "코드 수정 완료, 디버깅 세션을 다시 시작할게요."  
  
[디버깅 세션 재시작, 코드 실행, 변수 검사]  
  
AI: "데이터가 일치하는 것을 확인했어요. 문제가 해결된 것 같아요."  
개발자: "해결됐어!"

설치 (3단계)

# 1. VSCode Extension 설치  
code --install-extension mcp-debug-tools  
  
# 2. npm 패키지 설치 (선택사항)  
npm install -g @uhd_kr/mcp-debug-tools  
  
# 3. AI 도구에 연결  
# Claude, Cursor, Windsurf 등에서 MCP 서버 추가  
{  
  "mcpServers": {  
    "release_dap-proxy": {  
      "command": "npx",  
      "args": [  
        "-y",  
        "@uhd_kr/mcp-debug-tools@latest"  
      ]  
    }  
  }  
}

주요 기능

29개 강력한 디버깅 도구

브레이크포인트 관리: 조건부, 로그 포인트 지원
실행 제어: Step In/Out/Over, Continue, Pause
변수 검사: 실시간 값 추적, 표현식 평가
콜스택 분석: 함수 호출 체인 시각화
멀티스레드 지원: Worker Threads, SharedArrayBuffer 디버깅

5개 실시간 모니터링 리소스

활성 디버그 세션 상태
브레이크포인트 목록
콜스택 정보
변수 스코프
예외 정보 및 스택트레이스

링크

GitHub: github.com/uhd-kr/mcp-debug-tools
npm: @uhd_kr/mcp-debug-tools
VSCode: marketplace.visualstudio.com
Demo: YouTube 데모

개발자의 말

매일 AI가 쏟아낸 코드의 문제를 일일이 디버깅에 시간을 쏟다가 생각했습니다.
'AI가 직접 문제를 해결하지 못하는 것은 디버깅을 할 줄 모르는 비기너와 같다'
그래서 AI가 디버깅을 할 수 있도록 도와주는 도구를 만들었습니다.
AI에 컨텍스트를 제공할 때 가장 중요한 것은 실제 데이터입니다.
디버깅은 코드의 실행 흐름과 상태를 실시간으로 관찰할 수 있게 해주기에, AI가 문제를 정확히 파악하고 해결책을 제시하는 데 큰 도움이 됩니다.

개발의 기본원칙을 지키고자 노력했습니다.
앞으로 계획은 디버깅을 통해 AI가 스스로 문제를 해결하는 도구를 만든 것이 'MCP Debug Tools'이라면
다음 단계는 AI가 스스로 코드를 작성할 때 올바른 습관으로 코딩할 수 있도록 돕는 도구를 만드는 것입니다.
이것이 모두 모여 올바른 코드 생산 파이프라인을 구축하는 것이 최종 목표입니다.

이 도구가 여러분의 AI 개발 여정에 큰 도움이 되길 바랍니다.
1인 개발자로서 다양한 피드백이 절실히 필요합니다.
버그 리포트, 기능 제안, 사용 후기 등 도움을 받고 싶어서 이 글을 씁니다.

감사합니다.

피드백: yoo.hwanyong@gmail.com