代码运行
HTML / JS / CSS 在线运行调试 · 共 4 个工具
这些页面在站内的 iframe 里运行代码并渲染结果,让你不打开编辑器、不存文件、不另起本地服务就能验证一段代码。HTML、CSS、JavaScript、Markdown 各有一个实时预览。
你得到的是预览环境,不是沙箱。JavaScript 执行器在页面上下文中运行你的代码,也就是说它拥有和本站其他脚本一样的权限。请把它当成只运行你自己代码的草稿纸。
我该用哪个?
- 检查布局或某条 CSS 规则:用 HTML 与 CSS 预览。两者都在独立 iframe 中渲染,样式不会泄漏到本站。
- 试一个函数或表达式:用 JavaScript 运行。控制台输出会连同抛出的错误一起显示在编辑器下方。
- 预览文档:用 Markdown 渲染。注意输入里的原始 HTML 会被转义而不是渲染——这是刻意防 XSS 的选择,与 GitHub 和多数静态站点生成器不同。
- 判断响应式行为:不要用这里的预览。视口单位与媒体查询是按 iframe 尺寸解析的,不是你的真实设备,在这里测出的断点可能与正常访问同一页面的结果不一致。
本分类的全部工具
HTML 在线运行
左侧写 HTML+CSS+JS,右侧 iframe 实时预览,支持运行与清空
JavaScript 在线运行HOT
写 JS 点运行,捕获 console.log/error/warn 输出并显示运行时长
CSS 实时预览
左侧写 CSS、可编辑 HTML 结构,右侧实时渲染效果
Markdown 在线预览
轻量 Markdown 渲染:标题/粗斜体/代码/列表/引用/链接/图片/分隔线/表格
本分类的深度指南
常见问题
JavaScript 运行器是沙箱吗?
不是。代码通过 Function 构造函数在页面上下文中执行,能像页面本身一样访问 DOM、存储与网络。只运行你写的或已审阅过的代码。真正的沙箱需要独立源,而没有自己的服务器时只能用云端执行服务。
能安装或引入 npm 包吗?
不能。这里没有模块解析、没有打包器、没有包仓库访问,裸模块名的 import 会直接失败。请粘贴自包含的代码片段,或使用已经打包成单文件的版本。
为什么预览里图片或样式表不显示?
相对路径是相对预览文档解析的,不是相对你的项目目录,因此本地存在的文件在这里并不存在。绝对 URL 在对方允许跨域请求时可用,内联的 data URL 则始终可用。