在线代码 Playground

2026年阅读约 15 分钟入门教程

Playground 前端

在线代码运行工具使用指南：HTML/CSS/JS 实时预览、Console 输出与错误捕获、Vue 3 模式练手，代码在本地沙箱运行不上传，草稿自动保存，打开即用。

这是什么

在线代码 Playground 是一个跑在浏览器里的迷你编辑器 + 运行器：左边写代码，右边即时看结果。它不止"三个面板"——文件栏支持 HTML / CSS / JS / Vue / JSON / Markdown 六种类型，文件名可以带目录（如 src/components/App.vue），顶部有原生 / Vue 3 / Vue 项目三种模式；右侧是运行预览，底部还有一块 Console 面板收集输出与报错。

它适合这些场景：

练手：学新语法、试新 API，不用建项目文件
验证：调试一段正则、一个排序函数、一段 DOM 操作
演示：给同事讲思路前，先把 Demo 跑通
面试准备：手写题（防抖、深拷贝、Promise 并发限制）随手跑
拆组件：用 Vue 项目模式把 App.vue 与子组件分文件写，验证嵌套渲染与 scoped 样式

提示：无需注册登录，不装任何环境，打开页面就能写。

60 秒上手

页面打开就自带一个可运行的示例，改几个字符就能看到效果：

写代码：文件栏里点标签切换文件，编辑器带行号与语法高亮；点「+」可新建 HTML / CSS / JS / Vue / JSON / Markdown 文件，重命名时直接写 src/components/App.vue 这样的相对路径
换布局：文件栏最左侧的按钮在横向标签与竖向目录树之间切换，目录树按层级分组、可折叠，选择会记住，刷新后仍是上次的形态
看结果：默认开启"自动运行"，停止输入约 0.6 秒后右侧自动刷新
手动运行：关闭自动运行开关后，点"运行"按钮或按 Ctrl+Enter
缩进：编辑器里按 Tab 键插入两个空格

工具栏还有四个按钮：「预览」可收起右侧预览区、让编辑器占满整行；「全屏」把整个工作区（代码区 + 预览 + Console）铺满屏幕，按 Esc 或再点一次退出（焦点落在预览 iframe 里时页面收不到按键，先点一下代码区或工具栏再按），注意预览区顶部的小图标只让预览独占全屏、两者不叠加；「下载」把当前代码导出成可直接双击打开的单文件 HTML（Vue 与 Vue 项目模式已内联运行时和全部模块，离线可用）；「重置」一键恢复当前模式的内置示例（有确认弹窗）。

提示：无论停在哪个 tab，Ctrl+Enter 都能触发运行。

Console 面板与错误捕获

Console 面板接住沙箱里的所有输出，不用打开浏览器 DevTools：

console.log / info / warn / error 全部捕获，按级别着色
对象与数组深度展开 3 层，循环引用标记为 [Circular]，函数显示签名，DOM 元素显示成 div#app.box 形式的选择器
运行时错误（含语法错误）与未处理的 Promise 拒绝自动捕获，红色高亮
最多保留 200 条；每次运行自动清空；面板可折叠、可单独清空

const obj = { name: 'jptool', tags: ['工具', '在线'] }; console.log('对象:', obj); // Console 输出 → 对象: { name: "jptool", tags: ["工具", "在线"] }

注意：console.table / count / time 等高级 API 未做格式化代理，输出走浏览器原生控制台。

Vue 3 模式

把顶部的模式开关切到 Vue 3，沙箱会自动注入 Vue 全局构建（vue.global.prod.js，v3.5），JS 面板里直接使用：

const { createApp } = Vue; createApp({ data() { return { count: 0 }; } }).mount('#app');

模板写在 HTML 文件的 #app 容器里，支持插值、指令、事件绑定；组合式 API 也可以：setup() { const n = Vue.ref(0); return { n }; }。

Vue 模式的内置示例是一个计数器：点击按钮、数据变化、视图更新，一条链路跑通，是练响应式 API 的最小环境。

提示：全局构建下请用 template 字符串或 HTML 内模板；要写 .vue 单文件组件（含 script setup 与 style scoped），把模式切到「Vue 项目」，见下一节。

Vue 项目模式：多组件真跑通

「Vue 项目」模式把文件栏变成一个真实的迷你工程，入口固定是 main.js（或 src/main.js），其余文件靠相对路径串起来：

// main.js import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

<script setup> import Hello from './components/Hello.vue'; import { ref } from 'vue'; const count = ref(0); </script> <template> <h1>Vue 项目模式</h1> <Hello name="极品工具" /> <button @click="count++">+1</button> <p>父组件计数：{{ count }}</p> </template>

三种常见写法的 .vue 都能真渲染：<script setup>（组合式）、选项式 <script> 配 <template>、以及只有 <template> 的纯展示组件；只有 <script> 而没有模板的按「自带 render 的组件」处理。既没写 template 也没写 script 的文件会被直接指出原因，不会静默渲染成一块空白。

每个 .vue 由 @vue/compiler-sfc 现场编译，<style scoped> 按文件路径生成稳定的 scopeId（形如 data-v-pg1a2b3c4d），所以嵌套组件的局部样式、响应式数据、事件绑定都是活的，不是静态字符串。全局 CSS（标了「全局」的文件）照常注入，.json / .md 文件可以放在工程里当数据或说明，只是不能被 import。

模块图只认两种说明符：'vue'（走 importmap 指向内联的运行时）与相对路径（./、../、/ 开头，可省略 .js / .vue 后缀）。注释掉的一行 import、字符串里出现的 import "x" 都只是文本，不会被当成依赖而拖住整个项目。

注意：裸包名（如 import _ from 'lodash'）、外部 URL、import() 动态导入、指向不存在的文件、以及互相引用的循环依赖都不会静默失败——Console 面板会给出「哪个文件、哪个 import、为什么不行」的中文错误，预览区同时显示一条排查提示，不会留给你一片空白。沙箱里没有 npm，需要第三方库请把它的代码贴成一个本地文件。

沙箱与隐私

预览运行在一个特殊的 iframe 沙箱里（sandbox="allow-scripts allow-modals allow-forms"，刻意不带 allow-same-origin）：

代码不上传：所有代码只在你的浏览器本地运行，服务器收不到
站点数据隔离：沙箱内是"不透明源"，用户代码读不到主站的 Cookie、localStorage、indexedDB
草稿本地保存：代码以约 1 秒防抖自动存到浏览器 localStorage，关页面再开还在；换设备不会同步

因为源是隔离的，沙箱里发 fetch 请求同样受 CORS 约束，行为和真实页面一致——所以它也可以用来理解跨域。

注意：不要在预览里输入真实账号密码做登录测试，任何在线运行环境都不该承载敏感凭据。

使用技巧与边界

死循环恢复：如果写了 while(true){}，页面会整体卡住（预览与主页面共用一个线程），刷新即可恢复，草稿不会丢。

文件栏跨模式共享：同一批文件在三种模式里都能看到，只是参与运行的方式不同——原生 / Vue 3 模式只拼 HTML / CSS / JS，.vue 与 import 关系要切到「Vue 项目」模式才生效。

定位与边界：它定位是"片段运行器"，不是 IDE——大型工程、需要 npm 依赖、需要构建链的项目请回到本地编辑器；需要多人协作编辑的，适合用代码托管平台。

代码分享：想发给别人或留档，点工具栏"下载"导出单文件 HTML（Vue / Vue 项目模式会把运行时与全部模块一起打包进去，离线可直接打开）；只是临时贴给同事，也可以直接把代码文字发过去，对方的页面会保留自己的草稿。

与 DevTools 配合：Console 面板看简明输出；要打断点、看网络面板，直接对整个页面开浏览器 DevTools，沙箱里的脚本同样可见。

开始使用

在线免费使用在线代码 Playground，无需安装，即开即用。

在线代码运行工具