这是什么
在线代码 Playground 是一个跑在浏览器里的迷你编辑器 + 运行器：左边写代码，右边即时看结果。三个输入面板分别对应 HTML、CSS、JS，右侧是运行预览，底部还有一块 Console 面板收集输出与报错。
它适合这些场景：
- 练手：学新语法、试新 API，不用建项目文件
- 验证：调试一段正则、一个排序函数、一段 DOM 操作
- 演示：给同事讲思路前，先把 Demo 跑通
- 面试准备：手写题（防抖、深拷贝、Promise 并发限制）随手跑
60 秒上手
页面打开就自带一个可运行的示例，改几个字符就能看到效果：
- 写代码：点 HTML / CSS / JS 三个 tab 切换面板，直接输入
- 看结果：默认开启"自动运行"，停止输入约 0.6 秒后右侧自动刷新
- 手动运行：关闭自动运行开关后，点"运行"按钮或按 Ctrl+Enter
- 缩进：编辑器里按 Tab 键插入两个空格
工具栏的"示例"按钮一键载入当前模式的内置示例；"重置"会覆盖当前代码（有确认弹窗），适合想从头开始的时候用。
Console 面板与错误捕获
Console 面板接住沙箱里的所有输出，不用打开浏览器 DevTools：
- console.log / info / warn / error 全部捕获，按级别着色
- 对象与数组深度展开 3 层，循环引用标记为 [Circular]，函数显示签名，DOM 元素显示成 div#app.box 形式的选择器
- 运行时错误（含语法错误）与未处理的 Promise 拒绝自动捕获，红色高亮
- 最多保留 200 条；每次运行自动清空；面板可折叠、可单独清空
Vue 3 模式
把顶部的模式开关切到 Vue 3，沙箱会自动注入 Vue 全局构建（vue.global.prod.js，v3.5），JS 面板里直接使用：
模板写在 HTML 面板的 #app 容器里，支持插值、指令、事件绑定；组合式 API 也可以：setup() { const n = Vue.ref(0); return { n }; }。
Vue 模式的内置示例是一个计数器：点击按钮、数据变化、视图更新，一条链路跑通，是练响应式 API 的最小环境。
沙箱与隐私
预览运行在一个特殊的 iframe 沙箱里（sandbox="allow-scripts allow-modals allow-forms"，刻意不带 allow-same-origin）：
- 代码不上传：所有代码只在你的浏览器本地运行，服务器收不到
- 站点数据隔离：沙箱内是"不透明源"，用户代码读不到主站的 Cookie、localStorage、indexedDB
- 草稿本地保存：代码以约 1 秒防抖自动存到浏览器 localStorage，关页面再开还在；换设备不会同步
因为源是隔离的，沙箱里发 fetch 请求同样受 CORS 约束，行为和真实页面一致——所以它也可以用来理解跨域。
使用技巧与边界
死循环恢复：如果写了 while(true){}，页面会整体卡住（预览与主页面共用一个线程），刷新即可恢复，草稿不会丢。
定位与边界：它定位是"片段运行器"，不是 IDE——大型工程、需要 npm 依赖、需要构建链的项目请回到本地编辑器；需要多人协作编辑的，适合用代码托管平台。
代码分享：目前直接复制三个面板的内容发给对方即可，对方的页面会保留自己的草稿；分享链接（把代码压进 URL）在计划中。
与 DevTools 配合：Console 面板看简明输出；要打断点、看网络面板，直接对整个页面开浏览器 DevTools，沙箱里的脚本同样可见。