a11y.skipToMainContent
1

HTML/CSS/JS 沙盒

将 HTML, CSS, 和 JavaScript 写入三个制表符编辑器, 并立即看到现场预览 。 对原型化,教学,或者快速实验都有好处.

Preview

Was this tool helpful?
Send output to:
Advertisement

How to use HTML/CSS/JS Sandbox

  1. 在HTML标签中写入或粘贴HTML,在CSS标签中CSS,在JS标签中JS.
  2. 切换自动运行以查看您输入时的活性变化, 或者单击 Run 手动刷新预览 .
  3. 实验和地铁 iframe sandbox 让你的密码被隔离.
  4. 点击下载 HTML 将您的工作保存为独立文件 .

{姓名}是什么来着?

这个沙盒将您的 HTML、 CSS 和 JS 组合成一个单一的文档, 并用 blob URL 在一个沙盒的 Iframe 中 。 预览在自动运行切换启动时自动更新(已跳出500ms),或者在点击"跑"时手动更新. 所有执行在 Iframe 中被隔离——沙盒中没有任何脚本可以访问母页.

使用标签在编辑器之间切换. 以独立的 HTML 文件下载您的工作 。 默认样本是一个简单的反程序,您可以完全修改或替换.

Advertisement

FAQ

这是CodePen还是JSFiddle?
轻量级客户端可选. 没有账号,没有服务器,没有建设步骤. 只要写出代码,立即看到结果。 对于多个文件的复杂项目,CodePen或StackBlitz是更好的选项.
我能用外部图书馆吗?
是 — 在您的 HTML 中包含 CDN 链接( 如 <code><script src="https://unpkg.com/react/umd/react.development.js"></code>). 沙盒执行HTML、CSS和JS面板中的任何内容.
我的密码被保存了吗?
没有 所有东西都在你的浏览器里运行 使用下载 HTML 按钮在本地保存您的工作 。 没有服务器侧存储 .

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

← Back to Developer Tools · All tags

Last updated:

Advertisement