Desminifique e formate o seu código online

Desminificar um formato específico

Cada formato tem a sua própria página, com os detalhes relevantes para essa linguagem:

• Desminificar JavaScriptJavaScript
• Desminificar CSSCSS
• Desminificar HTMLHTML
• Desminificar XMLXML
• Desminificar JSONJSON

O que é a minificação de código?

A minificação reduz o tamanho de um ficheiro de código ao remover texto desnecessário para a execução, como alguns espaços, quebras de linha e comentários. Os minificadores de JavaScript também podem abreviar nomes locais e reescrever expressões. Os programadores mantêm ficheiros de código-fonte legíveis, enquanto as ferramentas de compilação produzem versões compactas para distribuição. Estas transformações procuram preservar o comportamento, mas os seus efeitos exatos dependem da linguagem, do minificador e da respetiva configuração. Por isso, um ficheiro em produção costuma ser muito diferente do código-fonte editado pelo autor.

Ficheiros mais pequenos podem reduzir o volume de dados transferidos, sobretudo em conjunto com compressão de rede e armazenamento em cache. A poupança varia consoante o ficheiro original e as definições de compilação; não existe uma percentagem fixa nem uma melhoria garantida na velocidade da página. A contrapartida é a legibilidade. Quando um script ou uma folha de estilos chega numa linha densa, torna-se difícil seguir uma condição ou encontrar um seletor. Formatar uma cópia organiza o texto para facilitar a análise, mantendo a compilação original e as suas definições de distribuição disponíveis para comparação.

O que faz este desminificador?

O LFUnminify recebe código compacto e dá-lhe uma apresentação mais legível. Acrescenta indentação, espaça blocos e operadores e insere quebras de linha de acordo com o formatador selecionado. O resultado ajuda a acompanhar estruturas aninhadas, procurar um valor e analisar uma função sem ter de ler uma única linha densa. O grau de reorganização depende do conteúdo e da linguagem detetada, sem uma regra fixa que coloque cada instrução numa linha própria.

Nos bastidores, a ferramenta executa o Prettier, o formatador que a maioria das equipas de JavaScript já utiliza, diretamente no seu navegador. O resultado corresponde, por isso, ao que o seu próprio editor produziria num ficheiro de código-fonte normal: parece familiar em vez de gerado por uma máquina. A deteção é automática: cole qualquer coisa e a ferramenta determina se se trata de JavaScript, CSS, HTML, XML ou JSON antes de o formatar em conformidade.

A formatação não reconstrói o projeto original. Os nomes, comentários e ficheiros de código-fonte removidos durante a compilação não podem ser recuperados apenas através da apresentação. Os mapas de código-fonte ou o repositório original podem fornecer esse contexto em falta, mas esta ferramenta não os carrega nem remapeia rastreios da pilha de chamadas. O resultado é uma cópia de trabalho legível para análise, com os nomes e a estrutura do programa que permanecem no ficheiro fornecido.

Formatos de código suportados

Um único editor, cinco linguagens. O LFUnminify lê o conteúdo que cola, determina de que linguagem se trata e entrega-o ao analisador concebido para essa sintaxe. Nunca tem de escolher um formato num menu, e um ficheiro com a extensão errada é, ainda assim, tratado corretamente:

• JavaScript, incluindo sintaxe ES6 e posterior, módulos, código assíncrono e JSX. Um caso habitual: um pacote gerado por webpack, Vite, esbuild ou Terser.
• CSS, incluindo sintaxe moderna, propriedades personalizadas, consultas de média e regras aninhadas. Ideal para folhas de estilos compiladas por Tailwind, Sass ou PostCSS.
• HTML, incluindo os blocos script e style incorporados, que são formatados juntamente com a marcação em vez de ficarem numa única linha longa.
• XML, incluindo mapas de sites, fontes RSS, ficheiros SVG, envelopes SOAP e ficheiros de configuração que chegaram sem uma única quebra de linha.
• JSON, incluindo respostas de API com vários níveis de aninhamento, manifestos de pacotes, ficheiros de configuração e dados de registos.

Quando é útil um desminificador de código

Desminificar raramente é uma questão de curiosidade. Normalmente, é a forma mais rápida de responder a uma pergunta concreta sobre código que não escreveu, ou que escreveu mas já não consegue ler:

• Investigar um erro em produção. Formatar um pacote revela funções e ramificações difíceis de ler numa só linha. As posições originais dos rastreios da pilha não correspondem automaticamente à nova apresentação; utilize as ferramentas de depuração do navegador e os mapas de código-fonte, quando disponíveis.
• Auditar um script de terceiros. Antes de adicionar uma etiqueta de análise, um componente de conversação ou um script de afiliados ao seu site, desminifique-o e leia o que recolhe, a que domínios acede e o que grava no armazenamento.
• Ler uma folha de estilos compilada. As bibliotecas de classes utilitárias produzem enormes ficheiros CSS numa só linha. Formatá-los permite compreender a cascata, encontrar a regra que prevalece e perceber por que motivo a sua alteração é ignorada.
• Analisar uma resposta de API. Os dados JSON copiados do separador de rede são difíceis de ler antes de serem formatados. Após a formatação, a estrutura, o aninhamento e o campo em falta tornam-se evidentes em segundos.
• Aprender com código real. Ler como uma biblioteca bem construída resolve um problema é uma forma rápida de melhorar, e um ficheiro formatado permite fazê-lo com conforto.

Como utilizar o LFUnminify

Existem três formas de introduzir código no editor. Cole-o diretamente no painel esquerdo, clique em Procurar ficheiro para importar um ficheiro do computador ou arraste e largue um ficheiro na área de entrada. Para analisar um recurso de um site publicado, abra-o na vista do código-fonte ou nas ferramentas de desenvolvimento do navegador, copie-o e cole-o aqui. Também pode guardar o ficheiro .js, .css, .html, .xml ou .json e abri-lo com Procurar ficheiro.

A formatação começa automaticamente, sem precisar de procurar um botão. A ferramenta espera que pare de escrever, deteta a linguagem e apresenta o resultado formatado no painel direito, com realce de sintaxe. Pode então copiar todo o resultado para a área de transferência com um clique ou descarregá-lo como ficheiro com um nome adequado, para o abrir no seu editor.

Dois pequenos pormenores que ajudam nos ficheiros longos. Ative os números de linha quando precisar de referir uma posição exata ou de comparar duas versões lado a lado, a preferência fica guardada para a próxima visita. E se o formato detetado não for o que esperava, isso é muitas vezes uma pista por si só: um ficheiro reconhecido como JavaScript quando pensava ter JSON revela-se frequentemente uma resposta JSONP ou uma configuração envolvida numa atribuição.

O seu código nunca sai do seu computador

A formatação é executada localmente no navegador, com o código carregado juntamente com a página. O LFUnminify não envia o conteúdo do editor para um servidor de formatação, não o guarda numa base de dados nem exige uma conta para o processar. Os ficheiros abertos através de Procurar ficheiro ou por arrastar e largar também são lidos localmente. Depois de carregados os recursos necessários da página, a formatação não precisa de um pedido de rede para processar cada entrada.

O processamento local é útil para analisar um pacote interno, um projeto de um cliente ou um ficheiro de configuração sem enviar o seu conteúdo para este serviço. Mantém o controlo dos ficheiros que abre e das cópias que descarrega. A ferramenta não obtém ficheiros remotos em seu nome: guarde-os ou copie-os primeiro. Não é necessária uma conta para utilizar o editor, e a formatação não depende de uma fila de processamento remoto.

Porque é que o LFUnminify é gratuito?

O LFUnminify pertence a uma família de ferramentas gratuitas criadas por Ludovic Frank, juntamente com um gerador de palavras-passe, um gerador de favicons, um criador de paletas de cores e outras. A ideia é simples: as pequenas ferramentas a que os programadores recorrem várias vezes por semana devem estar acessíveis sem formulários de registo, barreiras de publicidade ou limites de créditos. Esta ferramenta não exige conta, não tem quotas nem propõe compras adicionais dentro do produto.

É também uma demonstração em funcionamento. Cada ferramenta da família é uma aplicação real, desenvolvida e mantida da mesma forma que os projetos dos clientes, o que diz mais sobre o nosso trabalho do que qualquer página de portefólio. Se precisa de desenvolvimento web à medida, de uma aplicação sólida em vez de um modelo pronto a usar, ou de consultoria técnica, encontra-nos na ligação do rodapé.

Perguntas frequentes