开发服务器预览

Termbridge 可以代理你的本地开发服务器，并在预览窗格中显示。它非常适合移动设备测试，也适合在运行终端命令时查看应用。

快速开始

# Start your dev server (e.g., Vite on port 5173)
cd my-app && npm run dev

# In another terminal, start Termbridge with proxy
termbridge --proxy 5173

现在，你可以在 UI 中切换 终端 和 预览 视图。

工作原理

传入 --proxy <port> 时：

1. 所有 Termbridge 路由都保留在 /__tb/ 下
2. 其他所有请求都会代理到你的开发服务器
3. UI 会显示 视图 按钮，用于在终端和预览之间切换
4. 预览会通过代理在 iframe 中加载你的应用

Browser → Termbridge → Your dev server (localhost:5173)

切换视图

1. 点击底部栏中的 视图 按钮
2. 选择 切换到终端 或 切换到预览
3. 视图会立即更新

两个视图都会保持连接；查看预览时，你的终端会话仍会继续运行。

热模块替换（HMR）

Vite 的 HMR 可通过代理运行。来自已登录浏览器且位于 /__tb/ 之外的每个 WebSocket 连接都会转发到你的开发服务器，无论其路径为何，因此 HMR 套接字无需额外配置即可连接。

编辑代码后，可以立即在预览视图中看到更改，无需刷新。

支持的框架

任何在本地端口运行的开发服务器都可以使用：

只需将 --proxy 端口与开发服务器的端口保持一致。

使用场景

移动设备测试

在真实手机上测试响应式设计：

termbridge --proxy 5173

扫描 QR 代码，即可在移动设备的 Safari 或 Chrome 中查看应用的实际渲染效果。

全栈开发

查看应用的同时，在终端中运行命令：

1. 在终端视图中查看构建输出
2. 在预览视图中查看应用
3. 轻点即可在两者之间切换
4. 通过手机或平板继续工作

演示你的作品

将公开的 URL 分享给他人，向他们展示：

• 正在运行的应用（预览）
• 你的终端会话（终端）

非常适合远程结对协作或快速演示。

沙盒模式

使用 Daytona 沙盒时，请设置预览端口：

export TERMBRIDGE_SANDBOX_PREVIEW_PORT=5173

确保开发服务器绑定到所有网络接口：

npm run dev -- --host 0.0.0.0 --port 5173

Termbridge 会通过 UI 代理 Daytona 预览 URL。

故障排除

预览显示空白页面

• 确保开发服务器正在运行
• 检查端口是否与 --proxy 一致
• 在沙盒模式下，请使用 --host 0.0.0.0，以便访问该端口

HMR 无法运行

• 确认开发服务器支持 HMR
• 检查浏览器控制台中是否有 WebSocket 错误
• 某些框架需要显式配置 HMR

CORS 错误

代理可以处理大多数 CORS 问题，但如果你的应用会向其他来源发出请求：

• 配置开发服务器的 CORS 设置
• 或使用浏览器扩展绕过 CORS（仅用于开发）