企业官网建设流程全解析

Terax Web预览面板教程：自动检测开发服务器并快速预览

【免费下载链接】terax-aiLightweight (7MB) Terminal-first AI-native dev workspace项目地址: https://gitcode.com/GitHub_Trending/te/terax-ai

Terax 是一款仅 7MB 的终端优先 AI 原生开发环境，其内置的Web 预览面板可以自动检测本地开发服务器（Vite、Next.js、Django 等常用端口），一键在标签页中打开预览，无需切换到浏览器。本教程介绍如何用 Terax 的 Web 预览面板快速预览开发服务器，包括端口探测、自动跳转与沙箱安全机制。

一、为什么需要 Web 预览面板

前端开发中最常见的循环是：终端启动开发服务器 → 记住端口 → 切换到浏览器 → 输入localhost:端口→ 刷新。Terax 的预览面板把这条链路压缩成了一步：

• 自动检测：当终端输出中出现localhost地址时，状态栏会弹出提示，点击即可在预览标签页中打开
• 端口探测：内置常见开发服务器端口清单，点击即探测该端口是否有服务在监听
• AI 联动：AI 助手完成任务后可直接调用openPreview工具帮你打开预览

预览面板的核心源码位于 src/modules/preview/PreviewPane.tsx，地址栏与端口逻辑在 src/modules/preview/PreviewAddressBar.tsx。

二、快速上手：三种方式打开预览

方式 1：自动检测（零操作）

在终端中运行任意开发服务器，例如 Vite：

pnpm dev

当 Terax 检测到 localhost URL 后，状态栏会出现预览提示（见 TERAX.md 中preview/模块说明），点击提示即可新建一个预览标签页。

方式 2：Ports 端口下拉菜单（手动探测）

在预览标签页顶部的地址栏旁，点击Ports按钮，展开内置端口清单：

点击某个端口后，Terax 会向http://localhost:端口发起一次带 900ms 超时的探测请求：

• ✅ 有服务监听 → 自动跳转并加载预览
• ❌ 无服务 → 提示No server listening on :端口

端口清单与探测逻辑见 PreviewAddressBar.tsx#L31-L48 与 PreviewAddressBar.tsx#L222-L234。

方式 3：直接输入 URL

在地址栏输入任意地址并回车。Terax 会自动补全协议：

• localhost:3000→http://localhost:3000
• example.com→https://example.com
• 支持127.0.0.1、.localhost、[::1]等回环地址（见 src/modules/preview/lib/previewUrl.ts）

三、实用小技巧

1. 快捷键聚焦地址栏：预览标签页暴露了focusAddressBar句柄，配合全局快捷键可秒速切到输入框（见 PreviewPane.tsx#L60-L71）
2. 多标签并行预览：预览标签与终端、编辑器标签一样支持多开，切换标签时后台页面保持运行，开发服务器持续输出
3. 外部浏览器兜底：地址栏右侧的链接图标可一键在当前系统浏览器中打开同一地址

四、安全与性能：你可能注意到的细节

• 沙箱隔离：预览页运行在严格受限的 iframe 中，禁用了顶层导航权限，预览页面无法劫持主窗口（安全设计见 PreviewPane.tsx#L155-L169）
• 自动休眠：预览页在后台停留 30 秒后会自动释放内存（一个 Vue 开发页面可能占用数百 MB），切回来点击 Reload 即可恢复
• 嵌入限制提示：很多公网站点禁止被嵌入（X-Frame-Options），遇到空白页时面板会提示你改用系统浏览器打开
• Cookie 登录提醒：基于 Cookie 的登录在沙箱内可能失效，面板提供"Open in browser"快捷方式

五、小结

Terax 的 Web 预览面板把"打开开发服务器"这件事做到了极致简单：自动检测 → 端口探测 → 一键预览，配合沙箱与内存回收机制，在保持轻量的同时兼顾安全。如果你也在寻找一个能内嵌开发服务器预览的轻量 AI 开发环境，Terax 值得一试。

相关模块：src/modules/preview/ · 功能路线见 ROADMAP.md

【免费下载链接】terax-aiLightweight (7MB) Terminal-first AI-native dev workspace项目地址: https://gitcode.com/GitHub_Trending/te/terax-ai