用 Claude Code 写代码很爽，但遇到”它到底在干嘛”的时候就只能靠猜。一个开源项目正在改变这种状况。
开发者 matt1398 发布的 claude-devtools（原名为 Claude Code Context）是一款 Electron 桌面应用，为 Claude Code 提供了类似浏览器 DevTools 的可视化调试界面。项目上线两周已收获 3.2k Star，最近一次提交就在昨天，社区活跃度很高。
它解决了什么问题
Claude Code 在终端里运行，所有的会话日志、工具调用、子代理生成和上下文窗口变化都是文本流，无法直观看到”此刻 Agent 在做什么”。claude-devtools 把这些信息提取出来，用图形界面展示：
| 功能 | 说明 |
|---|---|
| 会话日志 | 实时显示 Claude Code 当前会话的完整对话历史 |
| 工具调用 | 可视化查看每个 Tool Call 的输入输出 |
| Token 消耗 | 统计每个请求的 Token 用量，帮助优化上下文 |
| 子代理状态 | 监控子代理的创建、执行和完成过程 |
| 上下文窗口 | 实时显示当前上下文占用比例 |
为什么值得关注
AI Agent 可观测性正在成为一个独立赛道。claude-devtools 的思路很清晰：不是替代 Claude Code，而是做它的”调试面板”。这对三类人特别有用：
- Prompt 工程师：需要精简 Prompt 省 Token，但不知道哪些部分被 Claude Code 实际使用了
- Agent 开发者：要验证自定义模型的真实表现，需要有透明的工具调用链
- 团队管理者：需要监控 Agent 的资源消耗和行为模式
项目用 TypeScript 开发，支持 macOS 原生应用打包，安装后在后台自动监听 Claude Code 的会话日志文件，无需修改 Claude Code 本身的配置。
快速上手
# 克隆项目
git clone https://github.com/matt1398/claude-devtools.git
cd claude-devtools
# 安装依赖并启动
npm install
npm run dev启动后会看到一个 Electron 窗口，自动检测当前系统中的 Claude Code 会话。如果有多个并行会话，可以切换查看。
限制
- 目前主要支持 macOS，Windows/Linux 适配还在进行中
- 依赖 Claude Code 的本地日志文件路径，如果 Anthropic 修改日志格式可能需要适配
- 对远程服务器上的 Claude Code 实例支持有限