在线代码运行器

在线代码运行器使用指南

📌 简介

在线代码运行器是一款专为前端开发者设计的轻量级沙盒工具。在开发网页时，我们经常需要快速验证一个 CSS 动画效果、测试一段 JavaScript 逻辑，或者仅仅是搭建一个 DOM 结构的原型。如果每次都新建一个本地文件再用浏览器打开，显得十分繁琐。本工具将 HTML、CSS 和 JavaScript 整合在一个界面中，实时编译渲染，是你摸鱼与快速验证的神器。

📖 沙盒安全与隔离机制

为了让代码运行不影响当前网页，本工具使用了 HTML5 的 <iframe> 标签，并利用 srcdoc 属性动态注入代码。当您点击“运行”时，工具会把 HTML、CSS、JS 拼接成一份完整的 HTML 文档字符串，直接交给 iframe 去渲染。这种方式实现了完美的样式和脚本隔离，即便你的 JS 写了死循环，也能通过刷新页面恢复。

💼 常见应用场景

• 快速验证：突然想不起某个 flex 布局的代码怎么写，在这里写完直接看效果。
• 学习测试：在看前端教程时，边看边敲代码，即时验证结果。
• 原型构建：快速搭建一个纯前端的交互 demo 发给同事，而不是传一堆工程文件。

⚙️ 使用步骤

1. 在左侧通过标签切换 HTML、CSS 和 JS 的输入框。
2. 在输入框内尽情编写你的代码。
3. 点击“运行代码”按钮，或者按下 Ctrl+Enter（Mac 下为 Cmd+Enter）。
4. 右侧会实时展示你编写的网页效果。

⚠️ 注意事项

• 由于浏览器的安全策略，你无法在 iframe 中运行涉及跨域请求或需要高级权限的 API（如获取摄像头、地理位置）。
• 如果你在 JavaScript 中写了 alert 或 console.log，弹窗会直接在当前页面出现，控制台信息请按 F12 查看。

❓ 常见问题 (FAQ)