1. 快速入门与环境准备
GB Coder 完全在本地浏览器进程中运行，无需云端环境即可开发。
系统要求与浏览器兼容性
静态原型编辑器适用于所有支持 IndexedDB 与 ES2020 的现代浏览器。若需使用高级 WebContainer IDE，浏览器必须支持 SharedArrayBuffer 与跨源隔离策略（COOP/COEP）。推荐使用 Chromium 核心浏览器（Google Chrome、Microsoft Edge、Brave）或 Mozilla Firefox。
创建您的第一个开发工作区
访问 /app/projects 进入项目看板，点击“新建项目”即可在静态原型、React 18、Vue 3 或全栈 Node.js 模板中按需选择，工作区将在本地内存中秒级初始化。
2. 静态 HTML、CSS 与 JS 极速原型流
无需繁琐的编译构建，实时呈现页面改动。
三栏经典工作区布局
静态编辑器将代码划分为 HTML、CSS 与 JavaScript 三个独立视窗，并配备实时渲染预览沙箱。每次键入均带有防抖计算，实时更新 DOM 并保持页面滚动条位置。
<!-- index.html -->
<div class="card">
<h1 id="title">欢迎使用 GB Coder</h1>
<button id="counterBtn">点击次数：0</button>
</div>
<script>
let count = 0;
const btn = document.getElementById('counterBtn');
btn.addEventListener('click', () => {
count++;
btn.textContent = `点击次数：${count}`;
});
</script>通过 CDN 引入外部三方库
您可以在 HTML 头部直接引入常用 CDN 资源（如 Tailwind CSS、Bootstrap 样式或 React CDN），也可以使用内置的外部依赖管理器一键添加。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" />3. 项目模版中心与脚手架结构
专为现代前端工程化打造的开箱即用模版。
挑选标准项目模版
模版库提供了经过优化的落地页、组件演示及交互仪表盘初始架构。选择模版后将自动复制到独立的 IndexedDB 本地沙箱。
多文件目录组织方式
支持创建层级子目录、拆分独立 CSS 样式文件，并使用原生 ES Modules 的 import 相对路径语法引入其他 JS 逻辑。
4. React 与 Vue 前端框架开发
在浏览器端体验现代组件化开发。
React 18 组件原型开发
高级 IDE 支持原生 JSX/TSX 语法，配合 Vite 实现毫秒级热模块重载，编写代码如同在本地 VS Code 一样顺畅。
import React, { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<div className="p-4 bg-white rounded shadow">
<h2 className="text-xl font-bold">计数器: {count}</h2>
<button
onClick={() => setCount(c => c + 1)}
className="mt-2 px-4 py-2 bg-blue-600 text-white rounded"
>
增加点击
</button>
</div>
);
}Vue 3 单文件组件 (.vue) 支持
Vue 模版原生支持 template、script setup 以及 scoped 样式区块，内置浏览器端单文件编译引擎，确保响应式状态精准运行。
5. 高级 WebContainer IDE 与交互式终端
直接在浏览器标签页内执行真实的 Node.js 包与服务。
xterm.js 全功能终端交互
高级 IDE 内置 xterm.js 虚拟终端，支持标准的 POSIX 命令调度、查看目录文件，以及执行常规的 package.json 构建命令。
# 安装依赖包
npm install
# 启动本地开发服务
npm run dev
# 打印当前 Node.js 版本
node -v端口监听与内置预览自动对接
当 Vite 或其他 Node 服务监听端口时，WebContainer 会自动捕获并无缝重定向至内置预览 iframe，所有流量完全在本地闭环。
6. 本地优先存储、数据隐私与离线运行
深度保障源代码绝对安全与本地数据主权。
IndexedDB 本地数据库存储
项目的所有文件和改动均持久化保存在本地浏览器的 gb-coder-projects-db 数据库中，绝对不会在后台将代码上传至远端服务器。
离线可用性与容量保障
应用加载完成后即可在完全无网络的环境下顺畅编码。现代浏览器为同源 IndexedDB 提供了数 GB 的充足存储配额。
7. ZIP 归档导出与完整性校验恢复
拒绝平台锁定，实现数据的完全自由迁移。
带 SHA-256 哈希校验的 ZIP 导出
通过工具栏一键导出通用标准 ZIP 压缩包，自动计算校验指纹，确保文件在转移与归档过程中零损坏。
项目安全导入与解压恢复
只需将 ZIP 压缩包拖入项目看板即可瞬间复原。导入引擎具备路径安全扫描机制，防止非法相对路径穿透。
8. 全局文件检索与常用快捷键
大幅提升日常项目管理与编码效率。
经典 VS Code 键盘快捷键
支持 Ctrl+S (保存)、Ctrl+P (快速文件跳转)、Ctrl+F (局部查找替换) 以及 Ctrl+` (展开/收起终端)。
跨文件全局文本检索
全局搜索面板支持正则表达式与全词精确匹配，助您瞬间定位多文件项目中的任意关键函数。
9. 常见问题排查与浏览器兼容指南
应对各种系统环境下的常见疑难问题。
WebContainer 按钮呈禁用状态
请确认是否处于 HTTPS 访问环境，且浏览器未被第三方脚本拦截 COOP/COEP 跨源隔离头。部分激进的广告拦截插件可能会干扰这些安全头。
清除浏览器陈旧缓存与 Service Worker
如遇到版本更新后页面样式陈旧，请执行强制刷新（Ctrl+F5 或 Ctrl+Shift+R），系统会自动注销历史残留的 Service Worker。