具有 实时预览 的 HTML Runner
通过即时视觉反馈,实时观看您的 HTML 变得栩栩如生。
介绍
具有实时预览功能的 HTML 运行器可为您在编写 HTML 时提供最快的反馈循环。您无需保存文件和刷新浏览器,而是可以在代码旁边实时看到渲染的输出。
什么是实时预览 HTML 运行器?
实时预览 HTML 运行器是一种在线工具,可在您编写 HTML 代码时呈现它。每次执行代码时,预览面板都会更新,准确显示浏览器如何解释您的标记、样式和脚本。
这与传统开发不同,在传统开发中,您在文本编辑器中编写代码,保存文件,然后手动刷新浏览器。使用实时预览运行器,可以立即得到反馈 - 无需额外的步骤。
实时预览的主要特点
- 即时渲染 - 单击“运行”并立即查看渲染的 HTML
- 并排布局 - 左侧编辑器,右侧预览(堆叠在移动设备上)
- 完整文档支持 - CSS 和 JavaScript 在预览中执行
- 控制台输出 - 显示 JavaScript 日志、错误和警告
- 沙盒执行 - 为了安全起见,您的代码在隔离的 iframe 中运行
如何使用实时预览运行器
- 打开HTML 代码运行器
- 在编辑器中编写或粘贴 HTML 代码
- 单击“运行”或按 Ctrl+Enter
- 预览面板显示渲染的输出
- 修改代码并再次运行以查看更改
实时预览的用例
- 在项目中实现 CSS 布局之前对其进行测试
- 通过查看即时视觉结果来学习 HTML
- 单独调试渲染问题
- 响应式设计原型
- 预览电子邮件模板
常见问题解答
单击“运行”或按 Ctrl+Enter 时预览会更新。这使您可以控制代码的执行时间。
是的。 CSS 动画、过渡和关键帧动画都可以在实时预览中正确渲染。
是的。脚本标记中包含的 JavaScript 在沙盒预览 iframe 中执行。