架构：Browy DevTools CLI 内部实现

DevTools CLI 是一个小型的、无外部依赖的纯 JavaScript 实现，住在 extension/panel.{html,js,css} 里。它挂载到由 extension/devtools.js 注册的 DevTools 面板里。

如果你只是想知道怎么用，请看 DevTools CLI 页面。这一页是给好奇它怎么搭出来的贡献者看的。

文件

文件	作用
`extension/devtools.html`	一个小壳，加载 `devtools.js`
`extension/devtools.js`	调用 `chrome.devtools.panels.create('Browy', icon, 'panel.html')`
`extension/panel.html`	工具栏 + 日志 + 自动补全列表 + 文本框
`extension/panel.css`	仿照 DevTools Console 的样式，跟随你的 DevTools 主题显示浅色或深色
`extension/panel.js`	全部行为：REPL、斜杠命令、port 黏合

REPL 循环

panel.js 维护一个 <div id="log">，里面装的是若干”行”（user / assistant / tool / info / dim / ok / warn / err / banner）。下面的文本框是 prompt。按 Enter 时，面板先把你的输入作为一行显示出来，然后：

如果输入以 / 开头，派发到斜杠命令登记表（panel.js 大约第 250 行附近的 COMMANDS 数组）。
在 /js 模式下，用 chrome.devtools.inspectedWindow.eval 在被检查的页面里执行这一行。
否则，把 {type: 'chat.send', sessionId, text} 通过 port 发给原生主机，把 chat.delta 块流式追加到一行不断增长的助手输出里。工具调用会显示成卡片，等 chat.tool_result 到了再补全。

回合进行中按 Esc，面板会发 {type: 'chat.cancel', sessionId} 给主机，并显示一条 “cancel requested” 警告行。

斜杠命令登记表

每个命令是一个 {name, help, run} 三元组：

const COMMANDS = [
  { name: '/help',     help: 'Show available commands',                run: cmdHelp },
  { name: '/clear',    help: 'Clear the scrollback (Ctrl+L)',          run: () => clearLog() },
  { name: '/new',      help: 'Start a new conversation',               run: cmdReset },
  { name: '/reset',    help: 'Abandon this session and start fresh',   run: cmdReset },
  { name: '/model',    help: 'Show current model + pick from list: /model [id]', run: cmdModel },
  { name: '/login',    help: 'Sign in to GitHub Copilot',              run: cmdLogin },
  // 16 more: /sessions, /copy, /version, /theme, /feedback, /url, /title,
  // /tabs, /eval, /js, /dom, /snapshot, /export, /cancel, /history, /exit
];

/? → /help 和 /models → /model 是别名，在派发时处理。新增命令只需要追加一条记录。

自动补全

列表框 #ac 在你输入斜杠时显示匹配的 COMMANDS 条目。方向键移动选中项，Tab / Enter 确认。实现方式是对 name 做前缀匹配。

模型选择器

/model 不带参数时从主机获取模型列表（{type: 'models.list'} → 主机调用 Copilot SDK 的 listModels()），把每个模型渲染成一个可点击的行。点击某一行会发出 {type: 'models.set', id}，和 /model <id> 发的是同一条消息。工具栏的 #model 徽章在收到 session.ready 和 models.current 时更新。

历史

光标在输入框第一行时，↑ 往回翻以前的 prompt；光标在最后一行时，↓ 往前翻。只存在内存里。每次关掉再打开 DevTools，面板页面都会重建，所以历史只在这个 DevTools 窗口开着的时候有效。

按目标绑定

每个 DevTools 面板只检查一个标签页。面板把自己的 sessionId 存在 chrome.storage.local 的 browy.dt.sessionId.<tabId> 下，并在 session.start 里用 inspectedTabId 把会话绑定到这个标签页。在三个标签页里打开 DevTools，就是三段独立的对话。它们共用主机里的同一个智能体，同一时间只跑一轮。在同一个标签页上关掉再打开 DevTools，你会回到同一段对话。

这是故意的：让 DevTools CLI 成为按页面的工具，和 inspector 是按页面的方式保持一致。

为什么单独搞一个 `panel.js`？

我们本可以在侧边栏 UI 里渲染 REPL，把它叫做 “DevTools 模式”。我们没这么做，原因是：

DevTools 面板和 inspector、network、console 待在一起，给高级用户 想要的上下文，紧挨着智能体。
DevTools 面板的 UI 基本组件（工具栏按钮、主题、Ctrl+L 清屏这类宿主快捷键）和普通侧边栏在很多细节上不同。分开保留可以避免在侧边栏代码里到处出现 if (devtools) 分叉。
这让两个表面可以独立演进：侧边栏可以保持友好和对话风格； DevTools CLI 可以长出更多高级用户功能（REPL 结对编程、接入正在运行的会话），不会把侧边栏弄复杂。

即将到来

下面这些在 GitHub 项目看板上跟踪：

REPL 结对编程：明确的交接语法（:edit、:continue），用来在同一个文件上和智能体结对。
接入正在运行的会话：用调试视图查看正在进行的侧边栏智能体。

另见

DevTools CLI（用户指南）斜杠命令、模型选择器、键盘。

架构：原生主机 port 的另一端。

架构：扩展 DevTools 面板在整个扩展里的位置。