下拉查看上一篇

Claude DevTools：可视化 Claude Code 会话轨迹，48 小时 10 万+浏览的开发者工具

2026/03/17 18:276 min read0

AIClaude工具评测

使用 Claude Code 完成一个复杂任务后，你是否曾好奇过它到底"看了"哪些文件、"想了"什么、在每个步骤上消耗了多少 Token？Claude Code 本身并不提供这样的回顾能力——会话结束后，那些密密麻麻的工具调用和推理过程就消散在终端滚动历史中了。Claude DevTools 填补了这一空白：它是一款桌面应用，能够解析 Claude Code 的原始会话日志，重建完整的执行轨迹，并以直观的可视化方式呈现出来。该工具在 Reddit 发布后 48 小时内获得超过 10 万次浏览和 500+点赞，首周下载量突破 1000。

解决什么问题？

Claude Code 是一个强大的 AI 编程助手，但它的工作过程对用户来说是一个"黑盒"。当 Claude Code 执行一个任务时，它可能会：

  • 读取数十个文件来理解项目结构
  • 执行多次正则搜索来定位相关代码
  • 进行数轮内部推理来制定方案
  • 生成多个文件的修改差异
  • 在过程中消耗大量 Token

这些信息散落在 Claude Code 的会话日志文件中（存储在 ~/.claude/sessions/ 目录下），但原始日志是 JSON 格式，直接阅读几乎不可能。Claude DevTools 的价值在于：将这些原始数据转化为可读、可搜索、可分析的可视化界面。

核心功能

执行轨迹重建

Claude DevTools 的核心能力是从 JSON 日志中重建完整的执行时间线。每个工具调用（文件读取、搜索、编辑等）都会被解析并按时间顺序排列，形成一条清晰的执行链：

Timeline:
├─ 14:23:01  Read file: src/components/App.tsx
├─ 14:23:03  Grep: "useEffect" in src/**/*.tsx (12 matches)
├─ 14:23:05  Read file: src/hooks/useAuth.ts
├─ 14:23:08  Think: "需要在 useAuth 中添加 token 刷新逻辑..."
├─ 14:23:12  Edit file: src/hooks/useAuth.ts (+23 lines, -5 lines)
├─ 14:23:15  Read file: src/utils/api.ts
├─ 14:23:18  Edit file: src/utils/api.ts (+8 lines, -2 lines)
└─ 14:23:22  Summary: 修改完成，添加了自动 token 刷新功能

每个节点都可以展开查看详细内容——读取了文件的哪些行、搜索的具体结果、编辑的差异对比等。

代码差异可视化

对于文件编辑操作，Claude DevTools 提供了类似 GitHub Pull Request 的差异对比视图。你可以清楚地看到 Claude Code 在每个文件中具体修改了什么：

// src/hooks/useAuth.ts

 export function useAuth() {
   const [token, setToken] = useState(null);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+
+  const refreshToken = useCallback(async () => {
+    if (isRefreshing) return;
+    setIsRefreshing(true);
+    try {
+      const newToken = await api.refreshToken(token);
+      setToken(newToken);
+    } finally {
+      setIsRefreshing(false);
+    }
+  }, [token, isRefreshing]);

   useEffect(() => {
-    // 原来的简单认证逻辑
+    // 添加 token 过期检测
+    const interval = setInterval(() => {
+      if (isTokenExpiring(token)) {
+        refreshToken();
+      }
+    }, 60000);
+    return () => clearInterval(interval);
   }, [token]);

Claude DevTools 应用图标

Token 消耗分析

Token 消耗是使用 Claude Code 时最关注的指标之一。Claude DevTools 提供了详细的 Token 使用统计：

  • 总消耗：整个会话的输入/输出 Token 总量
  • 按步骤分布：每个工具调用消耗的 Token 数量
  • 消耗热点：哪些操作消耗了最多的 Token
  • 效率分析：哪些文件读取可能是不必要的

这些数据可以帮助你优化 Claude Code 的使用方式。例如，如果发现某个会话中大量 Token 消耗在读取不相关的文件上，你可以在下次使用时通过更精确的指令来减少不必要的探索。

搜索与过滤

在大型会话中，执行轨迹可能包含数百个步骤。Claude DevTools 提供了强大的搜索和过滤功能：

# 过滤条件示例
- 只显示文件编辑操作
- 只显示特定文件相关的操作
- 只显示 Token 消耗超过 1000 的步骤
- 按工具类型分组（Read / Grep / Edit / Think）
- 按时间范围筛选

安装与使用

Claude DevTools 是一个基于 Electron 的桌面应用，支持 macOS、Windows 和 Linux：

# macOS (Homebrew)
brew install --cask claude-devtools

# Windows (Scoop)
scoop install claude-devtools

# Linux (AppImage)
wget https://github.com/matt1398/claude-devtools/releases/latest/download/claude-devtools.AppImage
chmod +x claude-devtools.AppImage
./claude-devtools.AppImage

安装后，Claude DevTools 会自动扫描 ~/.claude/sessions/ 目录中的会话日志。你也可以手动导入日志文件。

基本使用流程

  1. 在 Claude Code 中正常完成任务
  2. 打开 Claude DevTools
  3. 在会话列表中选择要查看的会话
  4. 浏览执行轨迹、查看代码差异、分析 Token 消耗

整个过程不需要对 Claude Code 做任何额外配置——Claude DevTools 读取的是 Claude Code 默认生成的日志文件。

实用场景

场景一：代码审查辅助

当 Claude Code 帮你完成了一个大型重构任务后，在提交代码之前，可以用 Claude DevTools 回顾所有修改，确保没有遗漏或误改。这比在终端中翻阅历史记录高效得多。

场景二：学习 Claude Code 的工作方式

通过观察 Claude Code 处理不同类型任务的轨迹，你可以学习到它的"思考模式"——比如它是如何定位相关代码的、它会参考哪些文件来理解上下文、它的修改策略是什么。这些洞察可以帮助你写出更好的 prompt。

场景三：成本优化

Token 消耗直接关系到 Claude Code 的使用成本。通过分析多个会话的 Token 消耗模式，你可以找出哪些使用习惯导致了不必要的 Token 浪费，从而优化你的工作流程。

场景四：团队分享

当团队成员用 Claude Code 完成了一个复杂任务时，可以导出 Claude DevTools 的可视化报告，与团队其他成员分享整个执行过程。这对于知识传播和最佳实践沉淀非常有价值。

社区反响

Claude DevTools 在 Reddit 的 r/ClaudeAI 板块发布后引发了热烈讨论。48 小时内获得了超过 10 万次浏览、500+点赞，首周下载量突破 1000。社区反馈中最常被提到的特点包括：

  • "终于可以看到 Claude Code 到底在做什么了"
  • "Token 消耗分析功能帮我节省了不少钱"
  • "代码差异视图比终端输出好看一百倍"
  • "希望能加入会话对比功能"

在 Product Hunt 上，Claude DevTools 也获得了良好的评价，被评为当日最佳开发者工具之一。

总结

Claude DevTools 填补了 Claude Code 生态中"可观测性"的空白。它将原本不可读的会话日志转化为直观的可视化界面，让开发者可以回顾、分析和优化自己使用 Claude Code 的方式。对于重度使用 Claude Code 的开发者来说，这是一个几乎必备的辅助工具。

它的价值不仅在于"看"——更在于"理解"。通过 Claude DevTools，你不只是在回顾历史，你是在理解 AI 助手的工作模式，并据此优化人机协作的效率。

参考来源

评论

上滑查看下一篇