本文介绍 claude-devtools，一个用于可视化分析 Claude Code 会话日志的开源桌面应用。它能够重建 Claude Code 的完整执行过程，包括文件路径、工具调用、Token 消耗等详细信息，让你清楚地了解每一次 AI 对话的背后发生了什么。

项目简介

claude-devtools 是由 matt1398 开发的开源项目，基于 TypeScript 和 Electron 构建。截至目前，该项目在 GitHub 上已获得 1132 stars，采用 MIT 许可证开源。这是一个完全免费、无需 API 密钥、无需登录的工具，只需下载安装即可使用。

核心功能

上下文重建与可视化

Claude Code 的终端输出越来越简化，只显示 "Read 3 files"、"Searched for 1 pattern" 这样的摘要信息。claude-devtools 通过读取 `~/.claude/` 目录下的原始会话日志，反向工程重建完整的上下文信息：

CLAUDE.md 文件 - 全局、项目级、目录级别的配置分解
Skill 激活 - 显示哪些 skill 被触发
@提及文件 - 列出所有被引用的文件
工具调用输入输出 - 详细的工具调用记录
扩展思考 - 显示 Claude 的思考过程
团队协调开销 - 多 Agent 协作时的通信成本
用户提示文本 - 完整的用户输入

压缩可视化

当 Claude Code 达到上下文限制时，会自动压缩对话历史并继续。claude-devtools 能够：

检测压缩边界事件
测量压缩前后的 Token 变化
可视化上下文如何填充、压缩、重新填充

自定义通知触发器

定义规则接收系统通知：

内置默认规则：`.env` 文件访问警报、工具执行错误、高 Token 使用（默认 8000 tokens）
自定义匹配：使用正则表达式匹配特定字段
敏感文件监控：监控 `.env`、secrets、支付相关路径
噪音控制：设置 Token 阈值、添加忽略模式

丰富的工具调用检查器

每个工具调用都与结果配对显示在可展开的卡片中：

Read 调用 - 语法高亮的代码，带行号
Edit 调用 - 内联 diff，高亮显示增删
Bash 调用 - 命令输出
Subagent 调用 - 完整的执行树，可内联展开

团队与 Subagent 可视化

Claude Code 现在通过 Task 工具生成 subagent，并通过 `TeamCreate`、`SendMessage`、`TaskUpdate` 协调整个团队。claude-devtools 能够：

将 Subagent 会话解析为可展开的内联卡片
显示队友消息为独立的颜色编码卡片
完整展示团队生命周期
会话摘要显示独立的队友数量和 subagent 数量

命令面板与跨会话搜索

按 Cmd+K 打开 Spotlight 风格的命令面板，跨项目搜索所有会话，结果显示带高亮关键词的上下文片段。

SSH 远程会话

通过 SSH 连接到任何远程机器，检查在那里运行的 Claude Code 会话，界面完全一致。

多窗格布局

像 IDE 一样并排打开多个会话，拖拽标签页在窗格间移动，分割视图，并行比较会话。

技术栈

Electron - 跨平台桌面应用框架
TypeScript - 类型安全的 JavaScript 超集
React - 用户界面组件库
Node.js 20+ - 运行时环境
pnpm - 包管理器

安装指南

macOS (Homebrew)

```bash brew install --cask claude-devtools ```

直接下载

平台	下载	说明
macOS (Apple Silicon)	`.dmg`	下载 `arm64` 版本
macOS (Intel)	`.dmg`	下载 `x64` 版本
Linux	`.AppImage` / `.deb` / `.rpm`	选择对应发行版的格式
Windows	`.exe`	标准安装程序

Docker 部署

```bash

Docker Compose

docker compose up

或 Docker

docker build -t claude-devtools . docker run -p 3456:3456 -v ~/.claude:/data/.claude:ro claude-devtools ```

打开 `http://localhost:3456\` 即可使用。

快速开始

下载并安装应用
打开应用，自动发现 `~/.claude/` 目录下的项目
浏览会话列表，点击任意会话查看详情
使用 Cmd+K 搜索跨会话内容
设置自定义通知触发器监控关键事件

环境变量

变量	默认值	说明
`CLAUDE_ROOT`	`~/.claude`	Claude 数据目录路径
`HOST`	`0.0.0.0`	绑定地址（Docker 模式）
`PORT`	`3456`	监听端口（Docker 模式）

CLI vs claude-devtools 对比

终端显示	claude-devtools 显示
`Read 3 files`	精确文件路径、语法高亮内容、行号
`Searched for 1 pattern`	正则模式、每个匹配文件、匹配行
`Edited 2 files`	内联 diff、每文件增删高亮
三段式上下文条	每轮 7 类别的 Token 归因分析
Subagent 输出与主线程交织	独立的执行树，可内联展开
会话日志中的队友消息	颜色编码的队友卡片
关键事件混入正常输出	触发器过滤的通知收件箱
`--verbose` JSON 转储	结构化、可过滤、可导航的界面

开发构建

```bash

克隆仓库

git clone https://github.com/matt1398/claude-devtools.git cd claude-devtools

安装依赖

pnpm install

开发模式

pnpm dev

构建分发版本

pnpm dist:mac:arm64 # macOS Apple Silicon pnpm dist:mac:x64 # macOS Intel pnpm dist:win # Windows pnpm dist:linux # Linux ```

项目链接

GitHub 仓库: https://github.com/matt1398/claude-devtools
官方网站: https://claude-dev.tools
Product Hunt: https://www.producthunt.com/products/claude-devtools

字节笔记本

claude-devtools：Claude Code 可视化分析工具