跳到内容
DEVARY
所有工具

HTML Studio

可用

在隔离的浏览器沙箱中编辑完整 HTML 文档并实时预览。

Devary 不会上传或持久保存你的 HTML。
发送到

兼容工具

JSON StudioRegex LabCron StudioBase64 StudioTimestamp StudioText DiffUUID StudioData Converter

HTML 文档

1530 个字符

实时预览

已同步

控制台

0

控制台捕获仅在 Interactive 模式可用。Safe 模式会保持脚本禁用。

HTML Intelligence

一次本地分析同时驱动 DOM 树、诊断、SEO/元数据、资源清单和静态无障碍检查。

13 个元素0 个错误0 个警告
  • <!doctype html>第1行:1
  • <html>第2行:1
    lang="en"
    • <head>第3行:3
      • <meta>第4行:5
        charset="utf-8"
      • <meta>第5行:5
        name="viewport"content="width=device-width, initial-scale=1"
      • <title>第6行:5
      • <style>第7行:5
    • <body>第46行:3
      • <main>第47行:5
      • <script>第56行:5

Safe 模式阻止活动内容

JavaScript、网络连接、外部 frame、object 和表单提交均被阻止。内联 CSS 与 data/blob 媒体仍可渲染。

专注于 HTML 文档的工作区

粘贴或编写完整 HTML 文档，使用 CodeMirror 编辑，并在代码旁即时查看渲染结果。

隔离是功能的一部分

预览在 sandboxed iframe 中运行，而不是 Devary 的 DOM 中。Safe 模式默认阻止脚本和可访问网络的资源。

开发者指南

在隔离预览中调试完整 HTML

HTML Studio 提供编辑、隔离预览和诊断功能，但预览与生产环境并不完全相同。

实用操作步骤

  1. 配置

    加载完整 HTML 文档，检查 DOM、资源和诊断信息。

  2. 尝试

    格式化或保守压缩源码，比较代码、预览和控制台。

  3. 核对

    将 SEO 和无障碍检查视为初步提示，并在最终网站验证。

可复现的示例

保留可见文本间距

保守压缩会保留行内元素之间的必要空格。

设置

Conservative minify

示例输入

<main>  <span>A</span> <span>B</span> </main>

预期结果

<main> <span>A</span> <span>B</span> </main>

保留预格式化文本

预格式化块中的缩进和换行不变。

设置

Preserve preformatted content

示例输入

<pre>  line 1
  line 2 </pre>

预期结果

<pre>  line 1
  line 2 </pre>

限制与安全事项

支持范围

隔离预览与生产环境的脚本和资源策略可能不同。

投入生产前

自动诊断不能代替完整安全测试与无障碍审核。

常见问题

预览正常就代表生产 HTML 正确吗？

不代表。仍需检查资源、响应式布局和最终环境的安全策略。