Como descompactar código JavaScript (unminify)

Neste artigo você vai aprender a descompactar código JavaScript, ou seja, reverter o minify que muitos utilizam para economizar espaço

descompactar código JavaScript capa

Fala programador(a), beleza? Bora aprender mais sobre minify ou código compactado, como preferir! 😀

A técnica de minify é utilizada para algumas razões, entre elas:

  • Deixar o código mais performático;
  • Dificultar o entendimento do script;

Já que JS não é criptografado, pois não conseguimos garantir o total bloqueio da leitura do código na parte do usuário, alguns utilizam esta técnica

Mas o que muitos não sabem é que ela é facilmente reversível

Formação Claude Code
Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

  • 114 aulas
  • 4 projetos
  • 9h 15min

Então seja para que fim você está precisando do código ‘bonito’ ou desminificado, você pode utilizar a ferramenta JSBeautifier

Você só precisa colocar seu código minificado na área de texto e clicar em Beautify Code

Depois disso o código será descompactado, e você conseguirá entendê-lo perfeitamente, legal né? 🙂

Conclusão

Neste artigo você aprendeu a como descompactar código JavaScript

Utilizamos a ferramenta JSBeautifier, que é um site que hospeda a aplicação responsável por fazer o unminify

Esta técnica consiste em reverter o código que foi compactado, o nome original da técnica é minify

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!

O código volta a ficar igual ao original?

Aqui vai um aviso pra tu não se frustrar

O beautify devolve a indentação, quebra as linhas de novo e deixa tudo legível

Porém ele não traz de volta os nomes originais das variáveis nem os comentários que existiam antes

Isso porque o minify troca os nomes por letrinhas tipo a, b, c e apaga comentário só pra economizar espaço, e essa parte não tem como reverter

Ou seja, tu consegue LER e entender a lógica de boa, mas não é uma cópia idêntica do arquivo que o dev escreveu

Descompactar é a mesma coisa que desofuscar?

Não confunde as duas coisas, beleza?

O minify só encolhe o arquivo, então o beautify reverte numa boa e o código fica compreensível

Já a ofuscação embaralha a lógica de PROPÓSITO pra dificultar a leitura

Nesse caso, mesmo depois de descompactar, o código continua difícil de entender

Então se tu rodou o beautify e mesmo assim ficou um caos cheio de nomes estranhos, provavelmente é código ofuscado e não só minificado

Pra que serve descompactar o JavaScript?

Na prática isso é MUITO útil no dia a dia

Dá pra estudar como um script de terceiro funciona, entender uma biblioteca por dentro ou depurar um erro que só aparece no arquivo minificado que está em produção

Também ajuda quando tu pega um projeto antigo e só sobrou a versão compactada, aí o beautify deixa o código navegável de novo

Se liga que descompactar serve pra ENTENDER e depurar, e não pra roubar código dos outros

Perguntas frequentes sobre descompactar JavaScript

Descompactar é o mesmo que descriptografar? Não, o JavaScript não é criptografado, o minify só reescreve o código de forma compacta, então não tem nada de senha ou chave envolvida ali

Dá pra descompactar direto no navegador? Dá sim, as ferramentas de beautify rodam na própria página, tu cola o código, manda formatar e recebe a versão organizada na hora

Descompactar deixa o site mais lento? Não muda nada no site, o processo é só na tua cópia do código, o arquivo que roda em produção continua minificado do jeitinho que estava

Leia também

Escrito por | Matheus Battisti

Matheus Battisti
Fundador da Hora de Codar

Programador apaixonado pelo mundo das tecnologias, sempre buscando em aprender e se aprofundar em linguagens, frameworks e o que mais for necessário para executar um bom trabalho. Agora tem uma nova missão que é de passar seu conhecimento adiante para formar novos programadores e especializar mais os que já são.

Subscribe
Notify of
guest

0 Comentários
Oldest
Newest Most Voted

Formações

Formação Vibe Coding

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

  • 474 aulas
  • 20 projetos
  • 39h 27min

Blog | Mais populares