HTML Beautify & Formatter: Visualizar, formatar e depurar dados

Embora o minify de arquivos HTML, CSS e Javascript seja importante para a otimização de um site ou blog WordPress, em alguns casos se faz necessário usar ferramentas do tipo HTML Beautify & Formatter para realizar ajustes e correções internas de uma forma mais eficaz.

Neste artigo vamos mostrar como converter um arquivo HTML, CSS ou JS que está otimizado em minify e formatá-lo de forma que todas as informações possam ser visualizadas e editadas de forma fácil e objetiva.

Dicas para otimizar Javascript, CSS e HTML no WordPress

HTML Beautify & Formatter: Visualizar, formatar e depurar dados

Seções desta página

Como é um arquivo com minify

Abaixo segue um modelo básico de uma página otimizada com minify de arquivos. Veja que, nesse caso, todos os espaços e comentários são suprimidos em uma única linha de código.

<!doctypehtml><html lang=pt-br><meta charset=UTF-8><meta content="width=device-width,initial-scale=1"name=viewport><title>Título da Página</title><style>body{font-family:Arial,sans-serif;margin:0;padding:0}header{background-color:#333;color:#fff;padding:10px 0;text-align:center}main{padding:20px}footer{background-color:#333;color:#fff;padding:10px 0;text-align:center;position:fixed;bottom:0;width:100%}</style><header><h1>Meu Site</h1></header><main><h2>Bem-vindo à minha página!</h2><p>Esta é uma página HTML básica.</main><footer><p>© Meu Site</footer>Code language: HTML, XML (xml)

Como é um arquivo HTML formatado

No exemplo a seguir, temos o mesmo código anterior sendo exibido em uma formatação legível para humanos, com os devidos espaços e comentários internos.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título da Página</title>
    <style>
        /* Estilos CSS podem ser adicionados aqui */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        main {
            padding: 20px;
        }
        footer {
            background-color: #333;
            color: #fff;
            padding: 10px 0;
            text-align: center;
            position: fixed;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>

<header>
    <h1>Meu Site</h1>
</header>

<main>
    <h2>Bem-vindo à minha página!</h2>
    <p>Esta é uma página HTML básica.</p>
</main>

<footer>
    <p>&copy; Meu Site</p>
</footer>

</body>
</html>
Code language: HTML, XML (xml)

HTML Beautify & Formatter

Para visualizar, formatar e depurar dados em arquivos HTML, CSS e JS que estão otimizados com minify, recomendamos a utilização das seguintes ferramentas:

Code Beautify

Ferramenta capaz de executar e converter a formatação de arquivos HTML, CSS, Javascript, SQL, XML, JSON em poucos passos. Na maioria dos casos, basta copiar o código do arquivo que está em minify para o campo desejado.

Free Code Formatting Tools For Developers

Com esta ferramenta também é possível realizar a visualização, depuração e formatação de arquivos e códigos HTML, XML, SQL e JSON de uma maneira bem intuitiva, melhorando a legibilidade para os desenvolvedores web que precisam aplicar ajustes e correções.

HTML Formatter: Formata um código HTML mantendo um nível de recuo desejado, facilitando sua depuração.
XML Formatter: Formata um arquivo ou uma string XML.
SQL Formatter: Formata qualquer tipo de consulta e comando SQL, mesmo quando a instrução ou código é inválido.
JSON Formatter: Formata arquico ou string JSON criando objeto em árvore com destaques coloridos e com nível de recuo escolhido.

HTML Beautifier

A ferramenta HTML Beautifier é conhecida por seus usuários como embelezador de HTML, transformando um código HTML reduzido ou não formatado em um código totalmente legível por humanos, colaborando para os programadores e desenvolvedores a entendê-lo de uma maneira mais fácil e rápida.

Unminify

Se você precisa editar algum código da web que esteja reduzido ou minificado, ou precisa realizar engenharia reversa de códigos HTML, CSS, JS, JSON e XML nos quais você não possui as versões formatadas e originais, a ferramenta Unminify também pode ser de grande ajuda neste momento.

Resumindo

Além das ferramentas citadas acima, existem várias outras disponíveis online, em sua maioria de forma gratuita. Neste caso, cabe a você escolher qual delas vai atender melhor com a sua demanda.

Fica a dica!

Foto: Jackson Sophat via Unsplash.

Celso Junior em 11/04/2024