Saltar al contenido
DEVARY
Todas las herramientas

HTML Studio

Disponible

Edita documentos HTML completos con una previsualización en directo ejecutada dentro de un sandbox aislado del navegador.

Devary no sube ni persiste tu HTML.
Enviar a

Herramientas compatibles

JSON StudioRegex LabCron StudioBase64 StudioTimestamp StudioText DiffUUID StudioData Converter

Documento HTML

1530 caracteres

Previsualización en directo

Sincronizado

Consola

0

La captura de consola está disponible en modo Interactive. Safe mantiene los scripts deshabilitados.

HTML Intelligence

Un único análisis local alimenta el árbol DOM, diagnósticos, SEO/metadatos, recursos y la revisión estática de accesibilidad.

13 elementos0 errores0 avisos
  • <!doctype html>L1:1
  • <html>L2:1
    lang="en"
    • <head>L3:3
      • <meta>L4:5
        charset="utf-8"
      • <meta>L5:5
        name="viewport"content="width=device-width, initial-scale=1"
      • <title>L6:5
      • <style>L7:5
    • <body>L46:3
      • <main>L47:5
      • <script>L56:5

Safe bloquea el contenido activo

JavaScript, conexiones de red, frames externos, objetos y envíos de formularios quedan bloqueados. El CSS inline y medios data/blob pueden renderizarse.

Un workspace enfocado a documentos HTML

Pega o escribe un documento HTML completo, edítalo con CodeMirror y observa el resultado renderizado actualizarse inmediatamente junto al código.

El aislamiento forma parte de la herramienta

La previsualización se ejecuta en un iframe sandboxed y no dentro del DOM de Devary. El modo Safe bloquea scripts y recursos capaces de acceder a red por defecto.

Guía para desarrolladores

Depura documentos HTML completos en una vista aislada

HTML Studio permite editar, previsualizar en un entorno aislado y consultar diagnósticos del documento. Conoce sus límites antes de publicar.

Procedimiento práctico

  1. Configura

    Carga un documento HTML completo, selecciona el modo de vista segura y explora DOM, recursos y diagnósticos.

  2. Pruébalo

    Aplica formato o minificación conservadora y compara el código con la vista y la consola.

  3. Comprueba el resultado

    Interpreta SEO y accesibilidad como comprobaciones de desarrollo; valida después en el navegador y despliegue finales.

Ejemplos prácticos

Conservar espacios visibles al minimizar

La minificación conservadora mantiene la separación entre elementos en línea.

Configuración

Conservative minify

Entrada de ejemplo

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

Resultado esperado

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

Conservar texto preformateado

El contenido de bloques preformateados se mantiene, incluidos espacios y saltos.

Configuración

Preserve preformatted content

Entrada de ejemplo

<pre>  line 1
  line 2 </pre>

Resultado esperado

<pre>  line 1
  line 2 </pre>

Limitaciones y precauciones

Alcance compatible

La vista aislada no reproduce necesariamente el entorno final. Las políticas de recursos y scripts externos pueden variar.

Antes de usar en producción

Los diagnósticos de SEO y accesibilidad son heurísticos y no sustituyen una evaluación completa de seguridad o conformidad.

Pregunta frecuente

¿Una vista correcta garantiza el HTML de producción?

No. Debes comprobar diseño adaptable, recursos, accesibilidad y políticas de seguridad en el entorno final.