HTML/CSS/JS 在线运行

功能简介

这是一个用于前端实验的在线代码编辑器。在三个带语法高亮的标签页里分别写 HTML、CSS 和 JavaScript，预览会随着输入实时更新，类似 CodePen 或 JSFiddle，但不需要注册账号。自带的控制台会显示 console.log() 的输出和报错，并标出出错代码在 JS 里的行号，不打开开发者工具也能调试，在手机或别人的电脑上同样好用。

可以用它试一个 CSS 布局、给同事复现一个 bug、测试网上找到的代码片段、教新手入门，或者快速做个原型。

使用方法

1. 在 HTML、CSS、JS 标签页里输入代码，或者点「示例」从一个计数器小例子开始。标签上的圆点表示该面板里有代码。
2. 停止输入 0.6 秒后预览会自动运行。脚本较重时可以关掉「自动运行」，准备好后点「运行」或按 Ctrl+Enter。
3. 在「控制台」里查看日志、警告和错误，最新的一行总在最上面。对象、数组、Map、Set 和 DOM 元素都会以简洁易读的方式显示。
4. 点「分享」把代码发给别人。「下载 ZIP」会把 index.html、style.css、script.js 分成三个文件打包，可以直接放进真实项目；「下载 HTML」把全部内容保存成一个 index.html 文件，任何浏览器都能打开。

代码会保存在当前浏览器里，下次回来还在。Tab 键会插入两个空格缩进。

示例

HTML：

<button id="go">点我</button>

JavaScript：

document.querySelector('#go').addEventListener('click', () => {
  console.log('点击时间', new Date().toLocaleTimeString())
})

每点一次，控制台就多一行。如果变量名写错了，控制台会显示红色的 ReferenceError，并标出 JS 面板中出错的行号。

工作原理

三个面板的内容会合成一个 HTML 文档，加载到带 sandbox 属性的 iframe 里，因此代码无法读取本站的 Cookie 或存储。框架里注入的一小段脚本会把 console 调用和未捕获的错误转发给页面，任何内容都不会离开你的设备。