使用步骤
- 用上方的按钮在 HTML、CSS、JavaScript 三个编辑框之间切换并编写代码。
- 默认停止输入后自动运行，也可以关闭自动运行，手动点「运行」。
- 在控制台查看输出和报错，满意后点「下载 HTML」保存。
参数说明
- 沙箱
- 预览运行在隔离的沙箱里，不能读取本站的 Cookie 和本地存储，也不能弹出对话框。
- 控制台
- 显示 console.log、console.warn、console.error 的输出以及未捕获的错误和行号，最多保留最近 200 条。
- 下载
- 把三部分代码合并成一个 HTML 文件，样式放在 style 标签里，脚本放在页面末尾。
页面是怎么拼出来的
三个编辑器的内容会按下面的顺序合并成一个文档。点「下载 HTML」得到的也是同样的结构，只是下载文件里不包含把控制台输出发送到预览下方页面的那段小脚本。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* 你的 CSS */
</style>
</head>
<body>
<!-- 你的 HTML -->
<script>
// 你的 JavaScript
</script>
</body>
</html>由于脚本在你的 HTML 之后，可以直接使用 document.getElementById，不必等页面加载完成。HTML 编辑器里只需要写 body 内部的内容，不要写 html、head 或 body 标签本身。预览是一个只被允许运行脚本的 iframe，这也是 alert 对话框和访问本站 Cookie 都被禁止的原因。
常见问题
能引用外部的库吗？
可以，在 HTML 里用 script 或 link 标签引用 CDN 地址即可，例如 jsDelivr 上的库。
为什么 alert 没有弹出？
沙箱禁止弹窗，alert、confirm 不会显示，请改用 console.log 输出到控制台。
代码会保存吗？
不会自动保存，也不会上传。关闭页面前请下载 HTML 文件。
隐私说明
本工具完全在浏览器中运行，文件和文本都在你的设备上处理，不会上传到我们的服务器。