跳到主要内容

在各自的编辑框里写 HTML、CSS 和 JavaScript,结果画面与控制台会随着输入即时更新。无需注册,代码不会上传到服务器,一条分享链接就能把整份代码带走。

代码演练场
HTML 放在 body 里
CSS 无需刷新即可生效
JS 在文档末尾执行
结果 只在本机运行
控制台

    用 console.log 打印的值和出现的错误会显示在这里。

    • 在本机处理
    • 不上传
    • 无需注册

    常见问题

    我写的代码会发送到服务器吗?
    不会。三个编辑框的内容只在这个浏览器里使用,预览也是浏览器自己渲染的。即使生成分享链接,代码也是放在地址 # 之后,而浏览器不会把 # 之后的部分发送到服务器。你的内容只保存在这个浏览器里,因此在其他设备上看不到。
    我写的东西会不会丢失?
    每次修改都会自动保存在这个浏览器里,关掉再打开也还在。不过保存位置是浏览器,所以关闭无痕窗口或清除浏览数据时也会一并消失。想长期保留,就用“下载”保存成一个 HTML 文件,或者生成“分享链接”记下来——链接里带着代码,有它就能在任何地方原样打开。
    可以使用 jQuery、React 这类库吗?
    在 HTML 编辑框里写 <script src="https://…"> 即可,CDN 地址可以直接用;CSS 库同样用 <link rel="stylesheet" href="…"> 引入。不过这些文件要从网络获取,离线时这部分就不会生效。像 JSX、TypeScript 这类需要先编译的语法无法直接运行——请先在代码转换器里转成 JS 再粘贴进来。
    预览里好像不能用 localStorage。
    预览运行在没有来源(origin)的沙箱中。正因如此,这里运行的代码碰不到本站的存储和页面——想想打开别人发来的分享链接的那一刻,这道围栏很有必要。为了让代码不至于在第一行就报错,这里装了一个模拟的 localStorage 与 sessionStorage,值只在这一次运行期间存在,重新运行就会清空。出于同样的原因,Cookie 也不会被保存。
    画面卡住了,我写了一个停不下来的循环。
    预览每 0.7 秒会报告一次“我还活着”。如果这个信号中断超过 4 秒,就会出现提示条并自动关闭自动运行——否则每敲一个字都会再次卡死。点“停止”会移除预览。在某些浏览器里,预览与本页共用同一个进程,整个标签页可能会短暂停住,这时刷新标签页即可。你写的代码已自动保存,会原样回来。
    错误里的行号是按我写的代码算的吗?
    是的。预览文档会把连接控制台的代码和你的 HTML 放在脚本前面,但显示时会减掉这段偏移,把 JS 编辑框的第一行算作第 1 行。用 console.log 打印的值也会展开显示,包括对象、数组、Map 和 DOM 元素,遇到循环引用会截断而不是报错。一次运行最多显示 500 行控制台输出——这样循环里的 console.log 就不会把本页一起拖垮。
    可以直接粘贴一整份 HTML 文档吗?
    可以。如果 HTML 编辑框以 <!doctype html> 或 <html> 开头,就以那份文档为底:不会再生成一套 html、head、body,你写的 <title> 和 lang 也保持原样。CSS 会加在 head 末尾,JS 会加在 body 末尾。只粘贴片段的话,则会放进 body 里。
    这和 CodePen 之类的服务有什么不同?
    这里不需要注册,代码不会存到服务器,而且页面打开过一次之后,断网也能继续用(装成应用会更可靠)。代价是没有服务器存储,也就没有“我的作品列表”,分享靠的是带着代码的链接。代码特别长时可能装不进链接,那就下载 HTML 文件发出去。

    相关工具