線上程式碼執行器

📖 工具介紹

这是一个完全在浏览器里跑的前端程式碼執行器。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 面板。
• 小心死循環无限循环会卡住预览标签页，写循环时记得留出口条件。
• 只做前端驗證本工具只做前端验证，不能替代完整的本地开发环境与构建流程。