claude-debugs-for-you

Claude Debugs For Youは、VS Code用の拡張機能で、Claudeなどの大規模言語モデル(LLM)がコードを対話的にデバッグし、式を評価することを可能にします。この拡張機能は、言語に依存せず、VS Codeのデバッガーコンソールと有効なlaunch.jsonをサポートします。使い方は簡単で、VS Code Marketplaceからインストールできます。

GitHubスター

423

ユーザー評価

未評価

お気に入り

0

閲覧数

6

フォーク

36

イシュー

12

README
description Claude Debugs For You

Badge

aka Vibe Debugging

Enable Claude (or any other LLM) to interactively debug your code

This is an MCP Server and VS Code extension which enables claude to interactively debug and evaluate expressions.

That means it should also work with other models / clients etc. but I only demonstrate it with Claude Desktop and Continue here.

It's language-agnostic, assuming debugger console support and valid launch.json for debugging in VSCode.

Getting Started
  1. Download the extension from releases or VS Code Marketplace
  2. Install the extension
  • If using .vsix directly, go to the three dots in "Extensions" in VS Code and choose "Install from VSIX..."
  1. You will see a new status menu item "Claude Debugs For You" which shows if it is running properly (check) or failed to startup (x)
Screenshot 2025-03-22 at 9 51 22 PM

You can click this status menu for the commands available

Screenshot 2025-03-22 at 9 59 22 PM
Follow one of the options below, depending on your setup
If using stdio (classic, required for Claude Desktop)
  1. Copy the stdio server path to your clipboard by searching vs code commands for "Copy MCP Debug Server stdio path to clipboard"

  2. Paste the following (BUT UPDATE THE PATH TO THE COPIED ONE!) in your claude_desktop_config.json or edit accordingly if you use other MCP servers

{
  "mcpServers": {
    "debug": {
      "command": "node",
      "args": [
        "/path/to/mcp-debug.js"
      ]
    }
  }
}
  1. Start Claude desktop (or other MCP client)
    1. Note: You may need to restart it, if it was already running.
    2. You can skip this step if using Continue/Cursor or other built-in to VS Code
If using `/sse` (e.g. Cursor)
  1. Retrieve the MCP server sse address by using the "Copy MCP Debug Server sse address to clipboard" command
    1. You can just write it out server URL of "http://localhost:4711/sse", or whatever port you setup in settings.
  2. Add it wherever you need to based on your client
    1. You may need to hit "refresh" depending on client: this is required in Cursor
  3. Start MCP client
    1. Note: You may need to restart it, if it was already running.
    2. You can skip this step if using Continue/Cursor or other built-in to VS Code
You're ready to debug!

VS Code Debugging Documentation

Open a project containing a .vscode/launch.json with the first configuration setup to debug a specific file with ${file}.

See Run an Example below, and/or watch a demo video.

Contributing

Find bugs or have an idea that will improve this? Please open a pull request or log an issue.

Does this readme suck? Help me improve it!

Demo
Using Continue

It figures out the problem, and then suggests a fix, which we just click to apply

https://github.com/user-attachments/assets/3a0a879d-2db7-4a3f-ab43-796c22a0f1ef

How do I set this up with Continue? / Show MCP Configuration

Read the docs!

Configuration:

{
  ...
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "node",
          "args": [
            "/Users/jason/Library/Application Support/Code/User/globalStorage/jasonmcghee.claude-debugs-for-you/mcp-debug.js"
          ]
        }
      }
    ]
  }
}

You'll also need to choose a model capable of using tools.

When the list of tools pops up, make sure to click "debug" in the list of your tools, and set it to be "Automatic".

Troubleshooting

If you are seeing MCP errors in continue, try disabling / re-enabling the continue plugin

If helpful, this is what my configuration looks like! But it's nearly the same as Claude Desktop.

Using Claude Desktop

In this example, I made it intentionally very cautious (make no assumptions etc - same prompt as below) but you can ask it to do whatever.

https://github.com/user-attachments/assets/ef6085f7-11a2-4eea-bb60-b5a54873b5d5

Developing
  • Clone / Open this repo with VS Code
  • Run npm run install and npm run compile
  • Hit "run" which will open a new VSCode
  • Otherwise same as "Getting Started applies"
  • To rebuild, npm run compile
Package
vsce package
Run an Example

Open examples/python in a VS Code window

Enter the prompt:

i am building `longest_substring_with_k_distinct` and for some reason it's not working quite right. can you debug it step by step using breakpoints and evaluating expressions to figure out where it goes wrong? make sure to use the debug tool to get access and debug! don't make any guesses as to the problem up front. DEBUG!
Other things worth mentioning

When you start multiple vs code windows, you'll see a pop-up. You can gracefully hand-off "Claude Debugs For You" between windows.

You can also disable autostart. Then you'll just need to click the status menu and select "Start Server".

Screenshot 2025-03-22 at 10 08 52 PM
Short list of ideas
  • It should use ripgrep to find what you ask for, rather than list files + get file content.
  • Add support for conditional breakpoints
  • Add "fix" tool by allowing MCP to insert a CodeLens or "auto fix" suggestion so the user can choose to apply a recommended change or not.
  • Your idea here!
作者情報
Jason McGhee

CTO @ Writ. Past: Principal Machine Learning Engineer @ DataRobot, Co-founder / Engineer @ Cursor, Sr. Software Engineer @ Pandora

WritSan Francisco

285

フォロワー

93

リポジトリ

4

Gist

0

貢献数

関連するMCP
mcp-ts-template logo

mcp-ts-templateは、TypeScriptを使用した開発のためのテンプレートです。開発者が迅速にプロジェクトを立ち上げるための基本的な構造や設定が含まれています。これにより、コードの一貫性と効率性が向上し、開発プロセスがスムーズになります。

TypeScript
erickwendel-contributions-mcp logo

erickwendel-contributions-mcpは、TypeScriptで書かれたプロジェクトで、GitHubの貢献を追跡し、可視化するツールです。ユーザーは自分の貢献を簡単に確認でき、他の開発者とのコラボレーションを促進します。使いやすいインターフェースと豊富な機能を備え、開発者の生産性を向上させることを目的としています。

TypeScript
c4-genai-suite logo

c4-genai-suiteは、TypeScriptで構築されたAI生成ツールのセットです。このツールは、開発者が効率的にAI機能を統合し、アプリケーションの開発を加速するための機能を提供します。特に、コード生成やデータ分析に強みを持ち、ユーザーが迅速にプロトタイプを作成できるようサポートします。

TypeScript