代码演练场 🔒 完全在您的浏览器中运行——不上传任何数据。

编写 HTML、CSS 和 JS,实时查看结果。

关于此工具

代码演练场是尝试想法的最快方式:无需搭建项目、无需构建步骤、无需服务器。在三个面板中输入 HTML、CSS 和 JavaScript,你一停止输入预览就会重新渲染。它非常适合测试来自 Stack Overflow 的代码片段、快速原型化一个组件,或演示一段代码的行为。

一切都在浏览器内的沙盒 iframe 中本地运行——你的代码绝不会被上传到任何地方。当你满意时,把它下载为一个自包含的 .html 文件,可在任何地方打开或放入项目中。

常见问题

我的 HTML/CSS/JS 会在服务器上运行吗?

不会。所有代码都在你浏览器内的沙盒 iframe 中执行——没有任何服务器端运行,你写的内容也就不会被发送到任何地方。

预览用的 iframe 可以放心尝试吗?

可以。预览使用 sandbox="allow-scripts allow-modals" 运行,无法访问父页面、读取 Cookie 或跳转顶层窗口——与网站其余部分是隔离的。

我的代码会自动保存吗?

会。停止输入约 300 毫秒后,HTML、CSS 和 JS 就会保存到当前浏览器的本地存储中,下次在这里打开代码练习场时会自动恢复。

我可以使用 CDN 上的外部库吗?

你可以直接在 HTML 面板中添加 <script src="https://..."> 标签来引入 CDN 托管的库,但不支持 npm/打包工具——只能加载普通 <script> 标签能加载的内容。

我可以把练习场保存为独立文件吗?

可以。下载功能会把当前的 HTML、CSS、JS 打包成一个带内联 <style> 和 <script> 标签的 .html 文件,无需服务器即可在任何浏览器中正常打开。