DEV Community

Cover image for I Built a VS Code Extension to Debug Azure AI Foundry Agents Without Leaving My Editor
Jubin Soni
Jubin Soni Subscriber

Posted on

I Built a VS Code Extension to Debug Azure AI Foundry Agents Without Leaving My Editor

TL;DR: I built Foundry Trace Inspector — a free, open-source VS Code extension that brings Azure AI Foundry agent traces into your editor as an interactive timeline. No portal switching, no throwaway scripts.


The problem

Azure AI Foundry has a genuinely great portal. You can see your agent runs, the tools it called, the messages it sent and received, and even a breakdown of token usage — all in a clean UI.

But here's what actually happens when you're building an agent locally:

  1. Write some code, trigger a run
  2. Switch to the browser, open the Foundry portal
  3. Navigate to your project → your agent → Traces tab
  4. Find the right run
  5. Click through to see what happened
  6. Switch back to VS Code to make a fix
  7. Repeat

That context switch sounds minor. But when you're iterating fast — tweaking a system prompt, adjusting tool call logic, debugging why an agent handed off to the wrong sub-agent — it adds up. You're constantly pulling your attention out of your editor and into the browser and back again.

What I wanted was simple: see the trace right where I'm working.


What Foundry Trace Inspector does

The extension connects to your Azure AI Foundry project and gives you three views for every agent run, all inside a VS Code panel:

Trajectories — the full span tree

A Gantt-style collapsible tree showing the full execution: Session → Invoke Agent → Chat turns → Tool calls. Every span shows duration, token counts, and cost. Click any span to open a detail drawer with the model, status, token breakdown, and raw input/output.

Trajectories description

This is the view I use most during debugging. At a glance I can see: did the tool call happen? How long did it take? What did the LLM actually receive as input?

User View — readable conversation replay

A chat-bubble timeline of the full conversation: user messages and assistant replies rendered the way a human reads them, with the agent name and model on each assistant turn. Each assistant bubble has a "View Trace" button that jumps directly to the corresponding response in the sidebar — so you can go from "something looked off in this reply" to the raw span in one click.

User View description

Token & Cost chart

A stacked bar chart (input vs output tokens per LLM turn) so you can instantly spot which turns are burning the most tokens — useful when you're trying to understand why a multi-turn conversation is getting expensive.

Token & Cost span chart description

Per span cost breakdown for both input and output tokens consumed
Token & Cost chart description


How it works under the hood

Azure AI Foundry agents use the OpenAI Responses API internally. Every agent reply produces a resp_... response ID that's visible in the Foundry portal's Traces tab. The extension fetches those responses directly via the same API and reconstructs the full conversation timeline locally.

When a session spans multiple turns, each response links to the previous one via previous_response_id. Load any response in the chain and the extension walks the chain automatically — you don't need to manually track down every ID.

Conversation IDs (conv_...) are discovered automatically from your saved responses, so once you track one response, the whole conversation surfaces.

No intermediate server. The extension makes API calls only to the Azure endpoint you configure. Your API key is stored in VS Code's encrypted SecretStorage — it never touches settings.json and never leaves your machine.


Setting it up

You need two things:

  • An Azure AI Foundry project endpoint URL (found in the Foundry portal under your project → Overview)
  • Either an API key or Azure CLI auth (az login) via DefaultAzureCredential

Once configured, grab a conv_... conversation ID from the portal's Traces tab, paste it into the sidebar, and the extension fetches all responses in that conversation automatically.

Setup description


What's next

A few things I want to add in v0.2:

  • Auto-discovery of recent runs — instead of pasting IDs manually, list recent conversations directly from the panel
  • Side-by-side diff — compare two runs of the same agent to see what changed between runs
  • Export to Markdown — generate a readable trace report you can paste into a PR or incident note

Try it

If you're building on Azure AI Foundry Agent Service, install it and let me know what you think:

🔗 Install Foundry Trace Inspector

It takes about 2 minutes to set up — install, paste your Foundry project endpoint. If it saves you time, a ⭐ rating on the Marketplace goes a long way.

If you have feedback, run into a bug, or want a feature — open an issue on GitHub. I'm actively developing this and would love to hear what would make the dev loop even faster for you.

Marketplace description

Further Reading

Top comments (0)