在线代码运行器

📖 工具介绍

这是一个完全在浏览器里跑的前端代码运行器。HTML、CSS、JavaScript 三段代码分开写，改动之后几秒之内就能在右边看到渲染结果，同时控制台会把 console.log、warn、error 的输出一条条列出来。代码不会上传到任何服务器，整段执行过程都在本机完成。

前端新手拿它练手，看到改一行样式页面立刻变化，比对着教程想象要直观。做技术分享的人可以用它把最小复现代码贴出来，观众点开就能跑。带新人的时候，用它演示某段脚本为什么报错，也省得让对方先配环境。

前端新手拿它练手，看到改一行样式页面立刻变化，比对着教程想象要直观。做技术分享的人可以用它把最小复现代码贴出来，观众点开就能跑。带新人的时候，用它演示某段脚本为什么报错，也省得让对方先配环境。

• 为什么 console 没有输出？先确认勾选了捕获控制台，再确认代码里真的有 console.log。
• 为什么页面一片空白？多半是 JS 报错了，看下方控制台的错误行号。
• 能引 jQuery 吗？沙箱里不能加载外部地址，需要把库源码整段贴进 JS 面板。
• 预览区太小怎么办？可以把 iframe 内容导出成 HTML 文件，用浏览器全屏打开。

✨ 功能特点

• 三段编辑：HTML 写结构，CSS 写样式，JS 写交互，用顶部按钮切换，互不干扰。
• 实时预览：开启自动运行后，停止输入 0.6 秒就重新渲染；也可以关掉改用手写点按钮。
• 控制台捕获：页面里的 console.log 与运行时错误都会传到下方控制台，并统计条数。
• 沙箱隔离：预览跑在带 sandbox 属性的 iframe 里，禁止弹窗、禁止跳转、禁止访问父页面。
• 深色预览：可以切换预览区底色，检查页面在深色背景下的表现。
• 导出与复制：一键把当前页面导出成 HTML 文件，或把某一段代码复制到剪贴板。

🚀 使用方式

1. 在 HTML 面板里写结构，也可以直接点【载入示例】看一个可点的计数器。
2. 切到 CSS 面板写样式，切到 JS 面板写脚本，三段会合并成同一个页面。
3. 设置自动运行延迟，需要精确控制时选"手动"。
4. 点【运行】，右侧出现渲染结果，下方控制台列出输出。
5. 确认没问题后点【导出 HTML】保存，或点【复制当前段】取走代码。

⚠️ 注意事项

• 无法发网络请求沙箱环境无法发网络请求，fetch 与 XMLHttpRequest 在本地文件场景下会被拦截。
• 没有本地存储无法使用 localStorage 与 Cookie，需要持久化的数据请改用内存变量。
• 不支持外部 CDN不支持引入外部 CDN 脚本，第三方库要自己把源码贴进 JS 面板。
• 小心死循环无限循环会卡住预览标签页，写循环时记得留出口条件。
• 只做前端验证本工具只做前端验证，不能替代完整的本地开发环境与构建流程。