Claude Code でコードを書くのは気持ちいい。しかし、「今一体何をしているのか」という問いには推測で答えるしかなかった。あるオープンソースプロジェクトがこの状況を変えようとしている。
開発者 matt1398 がリリースした claude-devtools（旧名 Claude Code Context）は、Claude Code にブラウザ DevTools ライクなビジュアルデバッグインターフェースを提供する Electron デスクトップアプリだ。リリース2週間で 3.2k Star を獲得し、昨日も最新コミットが記録されている。
解決する課題
Claude Code はターミナル内で動作し、すべてのセッションログ、ツール呼び出し、サブエージェント生成、コンテキストウィンドウの変更がテキストストリームとして出力される。claude-devtools はこの情報を抽出し、グラフィカルなインターフェースで表示する。
| 機能 | 説明 |
|---|---|
| セッションログ | 現在の Claude Code セッションの完全な対話履歴をリアルタイム表示 |
| ツール呼び出し | 各ツール呼び出しの入出力を可視化 |
| トークン消費 | リクエストごとのトークン使用量を統計、コンテキスト最適化に貢献 |
| サブエージェント | サブエージェントの作成、実行、完了プロセスをモニタリング |
| コンテキストウィンドウ | 現在のコンテキスト占有率をリアルタイム表示 |
注目すべき理由
AI エージェントの可観測性が独立したトラックになりつつある。claude-devtools のアプローチは明確だ：Claude Code を置き換えるのではなく、「デバッグパネル」として機能する。以下の3つの層に特に有用である。
- プロンプトエンジニア：トークンを節約するためにプロンプトを精简したいが、どの部分が実際に使われているか分からない
- エージェント開発者：カスタムモデルの実際の動作を検証するために、透明なツール呼び出しチェーンが必要
- チーム管理者：エージェントのリソース消費と行動パターンをモニタリングする必要がある
TypeScript で開発され、macOS ネイティブアプリのパッケージングをサポート。インストール後は Claude Code のセッションログファイルを自動監視し、Claude Code 自体の設定変更不要。
クイックスタート
# プロジェクトをクローン
git clone https://github.com/matt1398/claude-devtools.git
cd claude-devtools
# 依存関係をインストールして起動
npm install
npm run dev制限
- 現時点では macOS 主体、Windows/Linux 対応は進行中
- Claude Code のローカルログファイルパスに依存
- リモートサーバー上の Claude Code インスタンスへのサポートは限定的