クロード・デバッグ

クロード・デバッグズ・フォー・ユー

別名バイブデバッグ

Claude (または他のLLM) を有効にして、コードを対話的にデバッグします。

これは、claude が対話的にデバッグおよび式を評価できるようにするMCPサーバーおよび VS Code 拡張機能です。

つまり、他のモデルやクライアントなどでも動作するはずですが、ここでは Claude Desktop と Continue でのみデモンストレーションを行っています。

これは言語に依存しませんが、VSCode でのデバッグにはデバッガーコンソールのサポートと有効な launch.json が必要であると想定しています。

はじめる

リリースまたはVS Code Marketplaceから拡張機能をダウンロードします
拡張機能をインストールする

.vsix直接使用する場合、VS Code の「拡張機能」にある 3 つのドットに移動し、「VSIX からインストール...」を選択します。

新しいステータスメニュー項目「Claude Debugs For You」が表示されます。これは、正常に実行されているか（チェック）、起動に失敗したか（x）を示します。

このステータスメニューをクリックすると、利用可能なコマンドが表示されます。

設定に応じて、以下のいずれかのオプションに従ってください。

VS Code コマンドで「MCP デバッグサーバーの stdio パスをクリップボードにコピー」を検索して、stdio サーバーのパスをクリップボードにコピーします。
以下の内容をclaude_desktop_config.jsonに貼り付けます (ただし、コピーしたパスに更新してください)。他の MCP サーバーを使用している場合は、それに応じて編集します。

{
  "mcpServers": {
    "debug": {
      "command": "node",
      "args": [
        "/path/to/mcp-debug.js"
      ]
    }
  }
}

Claudeデスクトップ（または他のMCPクライアント）を起動します
1. 注: すでに実行されている場合は、再起動が必要になることがあります。
2. Continue/Cursor または VS Code に組み込まれている他の機能を使用する場合は、この手順をスキップできます。
「MCPデバッグサーバーのSSEアドレスをクリップボードにコピー」コマンドを使用して、MCPサーバーのSSEアドレスを取得します。
1. 「 http://localhost:4711/sse 」というサーバー URL、または設定で設定したポート番号をそのまま書き込むことができます。
クライアントに応じて必要な場所に追加します
1. クライアントによっては「更新」を押す必要があるかもしれません。これはカーソルでは必須です。
MCPクライアントを起動する
1. 注: すでに実行されている場合は、再起動が必要になることがあります。
2. Continue/Cursor または VS Code に組み込まれている他の機能を使用する場合は、この手順をスキップできます。

デバッグの準備ができました。

VS Code デバッグドキュメント

${file}を使用して特定のファイルをデバッグするための最初の構成セットアップで.vscode/launch.jsonを含むプロジェクトを開きます。

以下の例の実行を参照するか、デモビデオを視聴してください。

貢献

バグを見つけた場合、または改善できるアイデアをお持ちの場合は、プルリクエストを開くか、問題を記録してください。

この Readme はダメですか? 改善にご協力ください!

デモ

続行の使用

問題を特定し、修正方法を提案してくれるので、クリックして適用するだけです。

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

ドキュメントを読んでください!

構成：

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

ツールを使用できるモデルも選択する必要があります。

ツールのリストが表示されたら、ツールのリストで「デバッグ」をクリックし、「自動」に設定してください。

トラブルシューティング

継続中にMCPエラーが表示される場合は、継続プラグインを無効にしてから再度有効にしてみてください。

ご参考になれば幸いですが、私の設定はこんな感じです。Claude Desktop とほぼ同じです。

Claudeデスクトップの使用

この例では、意図的に非常に慎重にしました (仮定などを行わない - 以下と同じプロンプト) が、何でも実行するように要求できます。

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

現像

このリポジトリを VS Code でクローン/開く
npm run installとnpm run compile
「実行」をクリックすると新しいVSCodeが開きます
それ以外は「Getting Started」と同様です
再構築するには、 npm run compile

パッケージ

vsce package

例を実行する

VS Codeウィンドウでexamples/pythonを開く

次のプロンプトを入力します:

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!

他に言及する価値のあること

複数のVS Codeウィンドウを起動すると、ポップアップが表示されます。「Claude Debugs For You」をウィンドウ間でスムーズに切り替えることができます。

自動起動を無効にすることもできます。その場合は、ステータスメニューをクリックして「サーバーを起動」を選択してください。

アイデアの短いリスト

[ ] ファイルをリストしてファイルの内容を取得するのではなく、ripgrep を使用して要求するものを見つける必要があります。
[x] 条件付きブレークポイントのサポートを追加
[ ] MCP が CodeLens または「自動修正」提案を挿入できるようにすることで「修正」ツールを追加し、ユーザーが推奨される変更を適用するかどうかを選択できるようにします。
あなたのアイデアをここに！

claude-debugs-for-you