Ir para o conteúdo
DEVARY
Todas as ferramentas

HTML Studio

Disponível

Edite documentos HTML completos com prévia ao vivo executada em um sandbox isolado do navegador.

O Devary não envia nem persiste seu HTML.
Enviar para

Ferramentas compatíveis

JSON StudioRegex LabCron StudioBase64 StudioTimestamp StudioText DiffUUID StudioData Converter

Documento HTML

1530 caracteres

Prévia ao vivo

Sincronizado

Console

0

A captura do console está disponível no modo Interactive. Safe mantém os scripts desativados.

HTML Intelligence

Uma única análise local alimenta a árvore DOM, diagnósticos, SEO/metadados, recursos e a revisão estática de acessibilidade.

13 elementos0 erros0 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 bloqueia conteúdo ativo

JavaScript, conexões de rede, frames externos, objetos e envio de formulários ficam bloqueados. CSS inline e mídias data/blob ainda podem ser renderizados.

Um workspace focado em documentos HTML

Cole ou escreva um documento HTML completo, edite com CodeMirror e veja o resultado renderizado atualizar imediatamente ao lado do código.

Isolamento faz parte da funcionalidade

A prévia roda em um iframe sandboxed, fora do DOM do Devary. O modo Safe bloqueia scripts e recursos com acesso à rede por padrão.

Guia para desenvolvedores

Depure documentos HTML em prévia isolada

O HTML Studio reúne edição, prévia isolada e diagnósticos; entenda suas diferenças em relação à produção.

Fluxo prático

  1. Configure

    Abra um documento HTML completo e confira DOM, recursos e diagnósticos.

  2. Experimente

    Formate ou minifique com cuidado e compare código, prévia e console.

  3. Verifique

    Use avisos de SEO e acessibilidade como verificações preliminares.

Exemplos explicados

Preservar espaços visíveis

A minificação conservadora mantém espaços entre elementos em linha.

Configuração

Conservative minify

Entrada de exemplo

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

Resultado esperado

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

Preservar conteúdo pré-formatado

Blocos pré-formatados mantêm recuos e quebras de linha.

Configuração

Preserve preformatted content

Entrada de exemplo

<pre>  line 1
  line 2 </pre>

Resultado esperado

<pre>  line 1
  line 2 </pre>

Limites e cuidados

Escopo suportado

A prévia isolada pode ter políticas de scripts e recursos diferentes da produção.

Antes da produção

Diagnósticos automáticos não substituem auditorias completas de segurança e acessibilidade.

Pergunta frequente

Uma prévia correta garante a produção?

Não. Confira recursos, responsividade e políticas de segurança no ambiente final.