@sobird/claude-code

源于一个 59.8 MB 的 JavaScript 源映射文件（Source Map）cli.js.map

📦 安装

npm install -g @sobird/claude-code

进入到你的项目目录并运行 sobird

🛠️ 开发设置

前提条件

• Node.js 18+ 请自行安装
• Bun 全局安装 npm i -g bun

克隆和安装

# 克隆仓库
git clone https://github.com/sobird/claude-code.git

# 进入仓库目录
cd claude-code

# 安装依赖
bun install

在开发模式下运行

# 在终端运行（基于当前项目） claude code
bun run dev

构建项目

# 生产环境构建
bun run build

# 在本项目目录运行构建后的版本
node dist/cli.js

# 或者 链接到本机全局命令 sobird，使用sobird命令运行任意项目 （可选）
npm link

🐛 调试

实时预览（改代码自动重画）

想「改一个组件立刻看到效果」，用这个 harness：它把目标界面渲染进终端，bun --watch 监视到文件改动就重启进程重画。

bun run dev:ui

编辑 scripts/ui-harness.tsx 里 Demo() 返回的组件即可切换预览对象，保存后自动重载，Ctrl+C 退出。真实界面一般需要 app 的 provider，harness 已按 tests/testing/ink.tsx 包好 AppStateProvider + KeybindingSetup（render 另加 ThemeProvider）。

说明：全屏 TUI 没法真正热替换（Ink 的 reconciler 持有终端状态，中途换树会错位），所以这里的「实时」是整进程重启；harness 在退出信号里先 unmount()，让 Ink 复原 raw mode / 光标，避免重启之间把终端弄乱。

开发模式调试

打开vscode运行和调试面板，选择⚡️ Attach to claude code，点击开始调试（F5）。

生产构建调试

按下 command + shift + p，输入 Debug: JavaScript Debug Terminal，回车。 在JavaScript Debug Terminal终端面板下输入：

node dist/cli.js

源码级断点

上面的 attach 对应到现成脚本，分别断在源码和构建产物：

bun run debug          # bun --inspect-brk，断在 src/**.ts(x)
bun run debug:dist     # node --inspect-brk dist/cli.js，配合 cli.js.map

运行后在 Chrome 的 chrome://inspect 或 VS Code 里 attach。

调试日志

以调试模式启动（等价于 bun run dev 加 --debug）：

bun run dev:log

日志写入 ~/.claude/debug/<sessionId>.txt，并维护一个 latest 软链便于 tail：

tail -f ~/.claude/debug/latest

常见开关：

• --debug=<filter>：按模块包含/排除，例如 --debug=ink,render、--debug=!1p,!file
• --debug-to-stderr（-d2e）：日志同时打到 stderr
• --debug-file <path>：写到指定文件
• CLAUDE_CODE_DEBUG_LOG_LEVEL=verbose：连带输出更啰嗦的诊断（默认 debug）

会话中途也可以运行 /debug 开启日志并回读。

终端录制（asciicast）

把整段 TUI 录成 asciicast v2，可用 asciinema 回放。录制器仅在 USER_TYPE=ant 且 CLAUDE_CODE_TERMINAL_RECORDING=1 时启用，脚本已替你设好这两个变量：

bun run dev:record

录制文件落在 ~/.claude/projects/<sanitized-cwd>/<sessionId>-<timestamp>.cast：

asciinema play ~/.claude/projects/<...>/<sessionId>-*.cast

React DevTools（查看 Ink 的 UI 组件树）

CLI 的界面由自定义的 Ink renderer 渲染，默认在 React DevTools 里是看不到的。用独立的 React DevTools 应用即可查看其组件树、props/hooks，并随交互实时刷新。

前置条件：

• 全局安装独立前端应用（自带 Electron，会打开一个窗口并监听 8097 端口）：

  npm i -g react-devtools

• 后端依赖 react-devtools-core 已在仓库的 devDependencies 中，无需额外安装。

使用步骤：

1. 终端 A 启动前端：react-devtools
2. 终端 B 以开发模式启动 CLI：bun run dev（Bun 默认 NODE_ENV=development，会自动加载 src/ink/devtools.ts）
3. 在 DevTools 窗口顶部把 renderer 切到 ink，即可看到组件树并实时刷新。

说明：

• 仅在开发模式生效：src/ink/reconciler.ts 在 NODE_ENV === 'development' 下动态引入 src/ink/devtools.ts，生产构建不会加载。
• react-devtools-core 的后端是按浏览器环境写的，该模块会把 self/window 别名到 globalThis（对整个进程生效），再依次调用 initialize()、connectToDevTools()。
• 若 react-devtools 报 Electron failed to install correctly，说明 Electron 二进制没下载成功；设置镜像 ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ 后重装，或删除 node_modules/electron 再重装。

免责声明

本仓库仅供个人学习、研究、交流和参考使用，请勿将其用于任何商业活动