GB Coder 全解析：浏览器 IDE 完整指南

理解 GB Coder 的最好方式，是把它看成共享同一层外壳的两套环境。静态编辑器是专注 HTML、CSS 和 JavaScript 的工作台：输入代码，预览立即更新，中间没有构建步骤。高级 IDE 则通过 WebContainer 运行真正的 Node.js 工具链。WebContainer 是一个基于 WebAssembly 的运行时，直接在浏览器标签页内执行。两种模式共用项目面板、Monaco 编辑器、文件浏览器、预览面板和本地存储层，因此切换模式更像是换工具，而不是换产品。落地页、CSS 实验、教学演示或小脚本适合静态模式；需要 npm 包、Vite 开发服务器、JSX 编译或终端时，选择高级模式。高级运行时要求浏览器支持 SharedArrayBuffer 和跨源隔离，目前 Chromium 内核浏览器和 Firefox 是务实的选择。所有计算都在本地标签页中完成，不依赖远程虚拟机。

入口是项目面板。选择“新建项目”后，可以选择空白静态沙箱、React 18 模板、Vue 3 模板或 WebContainer Node.js 环境。模板库还提供落地页、仪表盘、实用工具和组件原型，每个模板都已经准备好合理的文件结构。新工作区会立即创建在 IndexedDB 这个浏览器事务型存储层中，因此第一次预览不需要下载、不需要账户，也不需要等待服务器往返。项目名称和文件夹由你自由组织，每个工作区彼此隔离。已有工作可以通过 ZIP 压缩包或 GitHub 仓库导入，两者都会先经过检查步骤，再写入文件。如果你是第一次使用，整个上手流程就是：打开项目面板，选一个起点，然后开始编辑。

静态编辑器把工作区分为 HTML、CSS 和 JavaScript 三个面板。GB Coder 会把标记包裹进符合标准的文档外壳，因此只写一个片段就能开始，不必维护样板 doctype。改动会在带短暂防抖的沙箱 iframe 中求值，既能避免快速输入压垮渲染器，又保留了即时感。虚拟控制台会在预览旁收集 log、warn、error 和 info 输出，让你不打开开发者工具也能调试小脚本。外部库可以从 CDN 或“外部库管理器”添加，涵盖 Tailwind、Bootstrap 和图标集等常见选项。静态项目还可以借助原生 ES 模块导入，扩展成多文件和目录结构。这种模式的取舍很明确：它不安装包，也不打包，因此适合学习、视觉实验和无依赖演示，而不适合大型框架应用。

界面之下是 Monaco，也就是驱动 VS Code 的开源编辑器引擎。这种血统体现在细节里：IntelliSense 补全、行内类型文档、语法校验、括号匹配、多光标编辑和可配置快捷键。TypeScript、JavaScript、HTML、CSS 和 JSON 都有语言服务，错误会在输入时标出，而不是等到构建之后。编辑器还支持拆分视图和差异查看器，适合比较修订版本或审阅 AI 建议。在编辑器周围，GB Coder 补上了通常需要单独工具的能力：支持正则表达式和大小写匹配的全项目搜索替换、面向主要 Web 语言的 Prettier 格式化、命令面板，以及可搜索的快捷键说明。自动保存持续运行，并用状态指示器显示当前文件的情况。单独看都是小便利，合在一起则消除了让浏览器编辑器显得局促的上下文切换。

高级 IDE 是最令人意外的部分。WebContainer 提供一个编译为 WebAssembly 的小型操作系统，在页面内运行真正的 Node.js 二进制文件。也就是说，npm install 会解析真实的包，npx 脚本可以执行，Vite 开发服务器会在本地端口启动，并转发到集成预览。终端是完整的 xterm.js shell，支持 ANSI 样式和命令历史，而不是模拟的输出面板。由于运行时就在标签页内，安装包和文件操作不会消耗远程容器。限制同样真实：该功能依赖 SharedArrayBuffer 和跨源隔离，内存受浏览器约束，原生二进制或 Docker 镜像不在支持范围内。但对于使用普通 npm 依赖的 React 或 Vue 应用，工作流程和笔记本电脑上完全一致。区别在于，环境随项目一起到达，而不必在每台机器上重新搭建。

npm install
npm run dev
# Vite 会输出本地地址，GB Coder 将该端口转发到预览

每个项目都有预览，而且它不只是一张静态缩略图。预览运行在沙箱 iframe 中，可以分离到独立窗口用于双屏工作，还提供手机、平板和桌面宽度的视口预设。扫描二维码即可在真实手机上打开预览，从而发现仅靠调整桌面窗口大小容易漏掉的布局问题。为了快速收集反馈，GB Coder 可以把单文件项目编码进 URL 哈希，生成分享链接。哈希不会发送到服务器，所以链接是自包含的；代价是存在实际的大小限制，多文件项目会被拒绝，而不是被截断。这类项目可以改用 ZIP 压缩包或沙箱工作流分享。这个区别很重要：分享链接是小演示的便利手段，而压缩包或仓库才是真实工作的可靠交付方式。

GB Coder 中的 AI 是可选项，而且被设计成可审阅的。GB Assist 是一个聊天面板，用来提问、解释错误和规划改动；它可以提出文件编辑建议，但任何内容应用之前都会以差异形式展示。使用助手需要连接服务商和模型，使用时提示词和选中的代码会发送给该服务商。Build with AI 则反过来：用自然语言描述界面，得到结构化的 HTML、CSS 和 JavaScript 项目，并在替换编辑器内容之前完成校验。Screenshot to Code 接受图片，包括从截图工具粘贴的图片，并生成标记和样式的初稿。语音控制使用浏览器的语音识别执行运行、格式化、解释、修复、构建、导出、打开面板或切换文件等命令；目前 Chrome 和 Edge 支持最好，同时始终可以使用手动输入的命令框。四项功能的共同点是：生成很快，但是否采纳由你决定。

项目会自动保存到 IndexedDB，但自动保存不等于版本历史。快照会为当前项目状态创建具名检查点，差异查看器会在恢复之前显示改动。需要离开浏览器的工作，可以用 ZIP 导出打包完整目录树并记录完整性哈希；导入时接受拖入的压缩包，并在写入文件前展示结构预览。GitHub 同步用双向路径闭环：用个人访问令牌连接，选择已有仓库或新建仓库，然后推送或拉取。推送会组装成单个原子提交，未变化的文件会被跳过，期间发生移动的分支会报告冲突，而不是悄悄覆盖他人的工作。拉取的文件会经过与压缩包相同的检查和写入流程。令牌默认只在当前会话中保留；要在设备上记住它，需要主动开启加密存储。GitHub 流量从浏览器直接发往 api.github.com，LadeStack 无需保管凭据。

项目只有别人能打开时才算完成。GB Coder 支持使用你自己的账户令牌，一键部署到 Vercel 和 Netlify。服务会识别项目是静态站点还是 Vite 应用，发送相应文件并返回线上地址。由于令牌属于你，部署会落在你的账户中，之后也可以在那里管理。静态项目还可以导出为 ZIP 上传到任意主机，而 GitHub 同步能把工作区连接到可驱动 CI 流水线的仓库。这些路径都不会把项目锁在 GB Coder 里：文件仍然是标准的 HTML、CSS、JavaScript 和配置。可移植性正是重点。浏览器是工作发生的地方，而不是工作被困住的地方。

GB Coder 免费使用，不需要登录或注册，也没有广告。它的默认姿态是本地优先：项目存放在浏览器存储中，打开项目不需要 LadeStack 账户。只有当你主动选择联网能力时，数据才会离开设备，例如 AI 服务商、GitHub 同步、部署，或你自己代码中引入的第三方 CDN。这个区别值得说明，因为本地优先并不等于只能离线。它适合想立刻看到 HTML 和 CSS 反应的学习者、需要免安装课堂的教师、在提交到仓库前先做界面原型的开发者，以及需要快速上线小工具或演示的任何人。它不太适合超大型 monorepo、原生工具链、基于 Docker 的服务，或禁止浏览器存储的组织。使用 AI 可能产生所选服务商的费用，部署则受你的 Vercel 或 Netlify 套餐约束。应用本身保持免费，外部服务由你选择。

可靠的日常流程是这样的：打开项目面板，用与任务匹配的模式创建工作区。先做出最小的可见版本，再用控制台和预览修正。只有静态编辑器确实无法完成时，才引入包。在打磨桌面细节之前，用手机宽度测试或扫描二维码。每到有意义的节点就创建一个快照。工作需要有持久的家时，推送到 GitHub 或导出 ZIP。有值得展示的内容时再部署。这些步骤都不需要本地安装，只要拥有相同的浏览器存储或新的克隆，就能在另一台机器上重复。如果你刚接触这个产品，从一个空白静态项目和一个标题开始；过去那套环境还没装完，第一次预览就已经出现在屏幕上了。项目面板位于 /app/projects。