HTML / CSS / JS 实时预览
编辑 HTML、CSS、JS 并实时预览效果
常见问题
HTML 实时预览是什么工具？
在同一页面提供 HTML、CSS、JavaScript 三个编辑区，并通过 iframe 即时展示渲染结果——类似轻量版 CodePen。适合快速写 Demo、验证 CSS 布局、复现 bug、制作面试题解答。
我可以用来做什么？
- 在浏览器里立刻试验一段 flex/grid 布局 - 分享一份可运行的 MVP Demo 给团队同事 - 复现 issue：把有问题的最小 HTML 贴进来，分享链接 - 在没有本地环境的机器上临时写代码（Chromebook / 手机浏览器）
代码会自动保存吗？会被上传吗？
代码存于浏览器 localStorage，刷新不会丢失。不会上传到服务器，也不会被索引。若需要跨设备同步，请手动复制或导出。
可以引用第三方库吗？
可以通过 `<script src="…">` 加载 CDN 上的库（React、Vue、jQuery、Tailwind CDN 等）。iframe 采用合适的沙箱策略以便运行用户代码，但仍请谨慎粘贴来历不明的脚本。
为什么 `alert` / `prompt` / `console.log` 没响应？
iframe 对 modal 对话框和跨源访问会有额外限制。工具已在 iframe 沙箱中允许 `allow-modals`，`alert`/`prompt` 应能正常工作；`console.log` 的输出请打开浏览器 DevTools 查看 iframe 的 console 面板。
和 CodePen、JSFiddle 相比？
CodePen/JSFiddle 功能丰富（多人协作、模板库、集成框架），但有账号体系和广告。DevToolkit 的实时预览更轻量、无需登录、隐私友好，适合一次性的小 Demo；长期项目或社区分享仍推荐 CodePen。