⚠️ 预览运行在一个隔离的 iframe 沙箱里，与本站页面互不影响，但仍请不要粘贴来源不明的代码——它拥有加载外部脚本、发起网络请求的能力。引入的 CDN 库来自公共网络，需要联网才能生效，若你在离线环境或公司内网使用，请改用本地文件。预览背景默认跟随站点主题（黑夜模式下自动变暗），如果你在自己的 CSS 里写了 body{background:#fff}，会以你的代码为准。代码草稿保存在浏览器本地，清除浏览器数据会丢失，重要代码请及时导出 HTML。所有代码不会上传服务器。
验证一个 CSS 效果、复现一个 JS bug、给同事发一段能直接跑的 demo——为这点小事在本地新建文件夹、开编辑器、起服务器，太重了。这个工具把「写代码 → 看效果」压成一步：左边写 HTML / CSS / JS，右边立刻跑起来，不用注册、不用登录、代码不出本机。
三个编辑器用标签页切换，各自独立：HTML 可以只写 body 内容（工具会自动补全完整文档结构），也可以写带 <!doctype> 的完整页面（此时 CSS / JS 会智能注入到对应位置）；CSS 自动注入 head；JS 在页面加载后执行。改完自动运行（停止输入约 0.7 秒），也可以关掉自动、用 Ctrl+Enter 或点「▶ 运行」手动触发。
最实用的是右下角的控制台：预览页里的 console.log / warn / error 和未捕获的运行时错误、Promise 拒绝都会被捕获并显示（带级别配色），不用再按 F12 翻到 iframe 里去看。需要第三方库时，在下拉框里点一下就能引入 Vue 3、React 18、jQuery、Tailwind CSS、Bootstrap 5、Axios、D3.js、Chart.js、Lodash、anime.js、Day.js、normalize.css，已引入的会显示成标签，随时可移除。
预览支持桌面 / 平板 / 手机三种尺寸，方便看响应式效果；预览背景可选「跟随主题 / 白底 / 暗底」——选「跟随主题」时，你在站点右上角切到黑夜模式，预览区会自动变暗，夜里调试不刺眼（你自己的 CSS 优先级更高）。写好的代码可以导出成一个完整 HTML 文件（HTML+CSS+JS 已合并），或复制完整代码；内容会自动存成草稿，下次打开接着写。调试正则可以配合正则可视化增强，写文档用Markdown编辑器，接口调试还有JSON 格式化。
Ctrl/⌘ + Enter 立即运行 · Ctrl/⌘ + S 保存草稿（不会触发浏览器保存网页）· Tab 缩进两个空格。代码区右下角可拖动调整高度。
<div>）就可以，工具会自动补上 doctype、head、meta 与 body。如果你想自己控制完整结构，写上 <!doctype html> 或 <html>，工具会识别为完整页面，并把 CSS 注入 <head>、JS 注入 </body> 之前。
console.log / warn / error 会自动转发到右下角控制台，连同未捕获的运行时错误（含行号）与未处理的 Promise 拒绝一起显示，日志按级别配色，超过一屏可滚动，点「清空」重来。
Ctrl+Enter 或点「▶ 运行」。console.log 输出、报错与 Promise 拒绝都会出现在这里，带级别配色与行号。<script src="本地路径">，或暂时不用库、用原生 JS 实现。body{background:#fff}，会以你的代码为准（你的样式优先级更高），这是符合预期的——毕竟演示的是你的页面效果。document.querySelector 但元素还没渲染——JS 注入在 body 末尾，一般没问题；③ 开启了自动运行但代码还没写完导致反复报错，可先关掉自动运行再改。审核通过后就会展示在留言板上，稍安勿躁～
还没有留言，来抢沙发吧！